在vue-cli中如何安装scss,并全局引入scss

在vue-cli脚手架采用scss正确的使用姿势

步骤一: 安装node-sass、sass-loader、style-loader

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

步骤二: 安装sass-resources-loader

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/assets/global.scss')
        }
      }
    )

可知,我是在assets中创建了一个global.scss文件。

最后,在组件中的style标签添加lang="scss",就OK了。

=======================================================

各位如果引入和使用中有任何问题可以给我发私信联系

上一篇:less或scss中@mixin的用法


下一篇:使用uni-app报错"代码使用了scss/sass语言,但未安装相应编译器"的解决办法