vue中如何使用SCSS

1. SASS是CSS的预处理器，SCSS是SASS3.0版本中引入的新语法，兼容CSS3和继承SASS的动态功能。
2. 安装依赖

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

3. 添加scss规则
   /build/webpack/base/conf.js文件

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

或者修改/build/utils.js文件

  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),

4. vue中使用

<style lang='scss'>
</style>

import '@/styles/app.scss';

5. 全局引用

启动文件如main.js 引入

import '@/styles/app.scss';

或者安装sass-resources-loader

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

修改/build/utils.js文件

scss: generateLoaders('sass')
//改为
scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
        //填入scss文件的绝对路径
      resources: path.resolve(__dirname, '../src/styles/app.scss')
    }
  }
)

6.引入第三方scss库

• bootstrap v4 （依赖jQuery.js 和 Popper.js）

npm install jquery@1.9.1
npm install popper.js@^1.14.7
npm install bootstrap

app.scss引用

@import '~bootstrap/scss/bootstrap';