在vue-cli + webpack 專案中使用sass
阿新 • • 發佈:2018-12-04
1、準備工作:
由於npm的伺服器在國外,網速慢而且安裝容易失敗,建議在安裝之前,先安裝國內的映象,比如淘寶映象
npm install -g cnpm --registry=https://registry.npm.taobao.org
2、安裝vue-cli
全域性安裝 vue-cli
cnpm install vue-cli -g
3、建立專案
vue init webpack vue-Project //初始化基於webpack模板專案 cd vue-Project cnpm install //安裝依賴 cnpm run dev //執行專案
4、在webpcak中配置sass
安裝sass-loader, node-sass.因為sass-loader依賴於sass-loader
cnpm install sass-loader node-sass --save
下載安裝完vue-cli和webpcak之後,webpack是沒有配置sass-loader的,
需要手動配置一下,
在
build
目錄下的 檔案webpack.base.conf.js
下的module規則下配置:
{ test: /\.scss$/, include: '/src/', loaders: ['style-loader', 'css-loader', 'sass-loader'] }
5、在單檔案元件中引用
<style scoped lang="scss">
....
</style>
6、重新執行專案, 如果沒有編譯出錯,說明配置成功
npm run dev