vue 項目 使用sass以及註意事項
阿新 • • 發佈:2018-07-27
com ade pre bsp 技術 tar p s blank ase
2,進入webpack.base.config.js 配置scss:
如下圖:
vue 項目 使用sass以及註意事項
1,安裝依賴:
npm install node-sass --save-dev
npm install sass-loader --save-dev
註:
通常使用npm安裝會出現以下報錯,安裝失敗。(網路問題)
可以通過淘寶的npm鏡像安裝node-sass,解決以上問題。
$ npm install -g cnpm --registry=https://registry.npm.taobao.org (安裝淘寶鏡像)
$ cnpm install node-sass --save (使用淘寶鏡像安裝node-sass)
註:安裝淘寶鏡像後,仍無法安裝node-sass的情況,執行下列命令
$ npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass
說明:
--registry=https://registry.npm.taobao.org 淘寶npm包鏡像
--disturl=https://npm.taobao.org/dist 淘寶node源碼鏡像,一些二進制包編譯時用
--sass-binary-site=http://npm.taobao.org/mirrors/node-sass 這個才是node-sass鏡像
如上添加配置scss:
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
3,如何引用外部的scss文件。
如有不足之處,請多多指教!!!github項目地址:https://github.com/whiskyma
vue 項目 使用sass以及註意事項