vue項目中配置scss

 以前建立 vue 項目的時候沒有選擇 scss 預編譯，如今項目中要使用，不知道如何配置，網上搜了下全都是：

npm  install sass-loader --save-dev
npm install node-sass --sava-dev

而後在build文件夾下的 webpack.base.conf.js 的rules裏面添加配置

{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}

我就納悶了，我項目裏並無build文件夾和 webpack.base.conf.js 。

難道是版本問題？查看vue-cli 版本，3.0+

 

百度~，果真，3.0+版本，沒有了build文件，只須要 cmd 執行

npm install -D sass-loader node-sass

 

style標籤添加 lang 屬性就能用了

<style lang="scss">

$color:red;

div {

  h1 {color:$color;}

}

</style>

 

 官方文檔鏈接

 https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8

 

新手博客，請多多指教