sass 安装过程中的坑

1,需要在项目中使用sass/scss 功能需要先在项目中安装，安装方法：

cnpm install node-sass --save-dev //安装node-sass 
cnpm install sass-loader --save-dev //安装sass-loader 
cnpm install style-loader --save-dev //安装style-loader 

2，安装完成后找到build文件夹下面的webpack.base.conf.js文件，然后在rules里面添加一下配置：(新版的vue已经在utils.js中配置好了sass，不需要添加此配置)

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

3，使用的时候在style标签中添加  lang=“scss” 即可。

 

添加完lang运行后发现报错：Modele build failed: TypeError: this.getResolve is not a function at Object.loader..........

原因是 sass-loader版本过高，需要运行 npm uninstall sass-loader（卸载当前版本），然后在重新安装低版本 npm install sass-loader@7.3.1 --save-dev；

在重新编译一下就可以了。

*

*

*

如果需要全局引入公共样式需要先运行 npm install sass-resources-loader --save-dev 安装依赖

然后将build中的utils.js中的scss: generateLoaders('sass'),修改成

scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
           resources: path.resolve(__dirname, '../src/style/public.scss')  //公共样式的路径

} } ),

现在就可以直接在组件中使用这个公共样式了，使用方法在组件中引入：

<style scoped="scoped" lang="scss">
    @import "@/style/public.scss";
</style>

如果需要整个项目引入（全局引入），可以直接在main.js里面引入：（如果出现报错，可能是第二步中重复配置了sass,删除webpack.base.conf.js中的sass配置即可）

import './style/public.scss'

完工！！！