vue項目使用scss/sass

Study

基本用法：scss/sass基操

1、安裝

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

2、單頁面使用

<style lang="scss" >
    .pageBody{
        width:100%;
    }
</style>

3、全局引用

npm install sass-resources-loader --save-dev

刪除build/webpack.base.conf.js中這段代碼

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

在項目src/assets下新建style目錄再新建一個scss文件，這裏我新建了兩個，一個是全局基本CSS變量值，一個全局通用樣式

1）通用樣式直接在main.js中引入

import '@/assets/style/global.scss' // 引入全局css

這樣在global.scss中的css將作用於全局

2）全局基本CSS變量值需在build/utils.js中將 scss: generateLoaders('sass')，修改如下：(特別注意地址只能寫絕對路徑，不能用@)

scss: generateLoaders('sass').concat({
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/style/baseConfig.scss') 
        }
      }
    ), 

 使用

<style lang="scss" >
    .pageBody{
        width:100%;
        color:$themeColor;
    }
</style>