vue-cli2配置scss遇到的各种坑

在项目中使用了scss，然而配置的时候，却遇到各种百度都很难搜索出来的问题。

首先是新建了一个公共的common.scss文件，里面用来存放公共样式，例如$blue:#4675b8;这个$blue就是scss的一个变量，无论在单独的scss文件里面或者vue文件里面的<style>都可以直接引用

再新建一个index.scss，在里面引入@import ‘./common.scss‘;就可以使用公共样式的变量，路径需要自己修改

安装scss依赖，百度基本上是以下这个流程

//在项目下，运行下列命令行
npm install --save-dev sass-loader

//因为sass-loader依赖于node-sass，所以还要安装node-sass
npm install --save-dev node-sass

然后npm run dev重启下项目

然而这样的话还是不行的，会报各种错误
如果遇到

Invalid CSS after "...load the styles": expected 1 selector or at-rule,was "var content = requi" in F:.....

这样的，因为安装scss的时候，会自动生成

{ test: /\.scss$/,use: [‘styl‘,‘css‘,‘sass‘],}

你要在webpack.base.conf.js里面先注释掉

【
　　另外一个方法是保留这个，然后把

   webpack.base.conf.js里面的
sass: generateLoaders(‘sass‘,{ indentedSyntax: true }),
 scss: generateLoaders(‘sass‘),
　　注释掉
　　其实就是loader重复，保留一个就好

】

然后在utils里面重新配置公共的common.scss，按照以下链接来 https://blog.csdn.net/qq_27868533/article/details/79651659?tdsourcetag=s_pctim_aiomsg 
在main.js里面引入import ‘./styles/common.scss‘ 作为全局引用，路径还是要自己修改这样的话在单独的scss文件里面或者vue文件里面的<style>都可以使用common.scss的$blue了有些问题弄着弄着就好了，也忘了还有什么问题，下次遇到再继续记录吧相关的资料的太少，如果有什么问题也可以丢上来，看我是否遇到过，能给予帮助~

vue-cli2配置scss遇到的各种坑

相关文章