vue2.0安装sass

安装sass步骤:1.npm install sass-loader@7.3.1node-sass@4.13.1 -D或者npm install sass-loader@7.3.1node-sass@4.12.0 -D2.需要在build文件夹下的webpack.base.conf.js的rules里面添加配置{test: /\.scss$/,loaders: ['style', 'css', '

K哇伊

1344人浏览 · 2021-05-20 11:48:38

K哇伊 · 2021-05-20 11:48:38 发布

安装sass步骤:
1.

npm install sass-loader@7.3.1  node-sass@4.13.1 -D
或者
npm install sass-loader@7.1.0  node-sass@4.11.0 -D
或者
node ：v10.16.0
"node-sass": "^4.9.0",
"sass-loader": "^7.1.0",
或者   
node ：v10.16.0
"sass": "^1.32.13",
"sass-loader": "^7.1.0",

在这里插入图片描述

2.需要在build文件夹下的webpack.base.conf.js的rules里面添加配置

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

3.使用SCSS时，在style样式标签中添加 lang=‘scss’ 即可

<style lang='scss'>
	@import 'basic.scss';  //导入外部的SCSS文件
	$color: red;
	p { color: $color ;}
</style>

4.全局使用scss

添加依赖

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

在这里插入图片描述
2. 修改build/utils.js

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

在这里插入图片描述