vue中使用scss_vue 中使用scss

1、安装

npm install node-sass --save-dev
npm install sass-loader@7.3.1  --save-dev
1
2

2、配置
在build中的 webpack.base.conf.js 文件中，找到rules，添加

// 在 rules中添加
{
  test: /\.scss$/,
  loaders: ['style', 'css', 'sass']
}
1
2
3
4
5

3、使用
在每个vue文件中的style，添加lang=“scss”

<style lang="scss" scoped>
/* 写入scss */

</style>
1
2
3
4

4、引入外部scss

<style lang="scss" scoped>
// 引入scss下的 test.scss 文件
@import './scss/test.scss';

// 引入scss下的 _test.scss 文件
@import './scss/test';

</style>
1
2
3
4
5
6
7
8

5、添加一个公共的scss，在每个vue文件中都可以使用
（1）安装

npm install style-loader --save-dev 
npm install sass-resources-loader --save-dev
1
2

（2）配置
找到scss: generateLoaders(‘sass’)修改为一下内容

// scss: generateLoaders('sass') 
// 改为：
scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
      // 此处为公共的scss
      resources: path.resolve(__dirname, '../src/assets/scss/_common.scss')
    }
  }
),
1
2
3
4
5
6
7
8
9
10
11

设置全局scss后，无需在style中引入，即可使用_common.scss中的变量等

新项目报错

输入如下命令：

npm install sass-loader@7.3.1 --save-dev
npm install node-sass --save
npm install style-loader --save
1
2
3

不能直接使用命令：

npm install sass-loader --save-dev
1

不然会报以下错误：

Module build failed: TypeError: this.getResolve is not a function at Object.loader

因为当前sass的版本太高，webpack编译时出现了错误，所以指定：npm install sass-loader@7.3.1 --save-dev 安装低版本的。