vue-cli中配置sass

最新推荐文章于 2024-03-01 14:52:07 发布

原创最新推荐文章于 2024-03-01 14:52:07 发布 · 675 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #sass

vue 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何在Vue项目中安装并配置SCSS，实现全局样式文件的引入，简化每个.vue文件中的样式引用过程。

在vue-cli中安装scss，且可以全局引入scss的步骤

在写vue的css样式时，觉得需要css预处理器让自己的css更加简洁、适应性更强、可读性更佳，更易于代码的维护，于是在vue-cli脚手架采用scss。写过的人都知道，每写一个.vue文件都要在style上面@import index.scss文件的话，这样很麻烦。css文件可以在main.js中可以直接import，而scss文件import会报错，因此记录下处理的方法。
步骤一：安装node-sass、sass-loader、style-loader

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

步骤二：安装sass-resources-loader

    cnpm 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/styles/index.scss')//自己的scss文件路径
        }
      }
    )