Vue使用sass的配置 - 戴向天

大家好！我叫戴向天

QQ群：602504799

如若有不理解的，可加QQ群进行咨询了解

1. sass-loader依赖于node-sass,所以要安装node-sass

   npm install node-sass --save-dev //安装node-sass

   npm install sass-loader --save-dev //安装依赖包sass-loader

   npm install style-loader --save-dev //安装style-loader

   npm install sass-resources-loader --save-dev // sass变量引入全局
   在项目build文件夹里找到utils.js ，定位到下边代码
   return {
   css: generateLoaders(),
   postcss: generateLoaders(),
   less: generateLoaders(‘less’),
   sass: generateLoaders(‘sass’, { indentedSyntax: true }),
   scss: generateLoaders(‘sass’),
   stylus: generateLoaders(‘stylus’),
   styl: generateLoaders(‘stylus’)
   }
   把上面这句scss: generateLoaders(‘sass’),改成如下
   scss: generateLoaders(‘sass’).concat(
   {
   loader: ‘sass-resources-loader’,
   options: {
   // **************************************************************************************************
   resources: path.resolve(__dirname, ‘…/src/assets/css/all.scss’) //这里按照你的文件路径填写******
   // **************************************************************************************************
   }
   }
   )

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

   {
   test: /.sass$/,
   loaders: [‘style’, ‘css’, ‘sass’]
   },

3. 在需要用到sass的地方添加lang=scss

   切记是scss不是sass*

   •   		        *	
     

   ** 编辑sass样式表的时候，后缀名是scss不是sass *

   •                                                                   *
     

   ---

注: 安装sass 出现问题 运行npm run dev 报错!

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

这是因为当前sass的版本太高，webpack编译时出现了错误，这个时候只需要换成低版本的就行，下面说一下修改方法，很简单，如下，找到package.json文件，里面的 "sass-loader"的版本更换掉 就行了。

解决方法：
将 “sass-loader”: “^8.0.0”，更换成了 “sass-loader”: “^7.3.1”,

也可以先卸载当前版本，然后安装指定的版本

卸载当前版本   npm uninstall sass-loader

安装     npm install sass-loader@7.3.1 --save-dev