vue项目使用scss 遇到的问题 总结

首先   项目中引入的命令

npm install sass-loader@7.3.1 --save-dev
npm install node-sass --save
npm install style-loader --save

不能直接使用npm install sass-loader --save-dev，因为当前sass的版本太高，webpack编译时出现了错误，所以指定：npm install sass-loader@7.3.1 --save-dev 安装低版本的。

很多文章说要在build/webpack.base.config.js中添加：

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

现在不加这段代码 ，依然是可以的，直接就可以用lang="scss"

在vue项目全局中引入scss

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

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

2.修改build中的utils.js

将

 

scss: generateLoaders('sass')

修改为

scss: generateLoaders('sass').concat({
         loader: 'sass-resources-loader',
         options: {
          // 需要全局引入的sass文件，这里引入了的scss文件，在所有的.vue文件都可以用到这份css样式，
          // 下面的resources接受一个数组，可以添加多个scss文件
          resources: [
              path.resolve(__dirname, '../src/assets/scss/variable.scss')
          ]
        }
    }),

使用compass

使用compass需要安装 compass-mixins 模块

npm install compass-mixins

然后在scss文件里直接调用 @import "../../node_modules/compass-mixins/lib/compass";　我这边的variable.scss是全局引入的

所以在variable.scss里引入了compass，在style里面可以直接用了

还有一种是没有再公用的scss文件引入compass，那么在build/utils.js里面改一下配置引入也可以

这样引入也可以直接使用compass