Vue项目引入Scss插件与报错解决方法

第一步:

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

1.如果遇到 Node Sass version 5.0.0 is incompatible with ^4.0.0. 安装 npm install [email protected]

2.如果遇到vue安装scss时报The “path“ argument must be of type string. Received undefined

这个错误是sass-loader 版本造成的，此时的版本是 “sass-loader”:"^10.0.1",修改版本为 “sass-loader”: “^7.3.1”，重新使用命令安装npm i sass-loader@7 --D即可

第二步:

 找到build中webpack.base.conf.js,在rules中添加scss规则

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

第三步:

可以在vue文件中使用

第四部:

在vue项目全局中引入scss

1. 全局引用时需要安装sass-resources-loader

2.修改build中的utils.js

scss:generateLoaders('sass')为

scss: generateLoaders('sass').concat({

            loader: 'sass-resources-loader',

            options: {

                //你自己的scss全局文件的路径

                resources: path.resolve(__dirname, '../src/assets/sass/sass_index.scss')

            }

   }),