1. 程式人生 > >在vue-cli + webpack 專案中使用sass

在vue-cli + webpack 專案中使用sass

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