style-resources-loader帮助我们引入全局css

问题

当我们使用vue时，我们可以通过将页面分分成无数个小的组件来提高代码的可维护性。

但是再写 scss 时，我就遇到了一个问题，如何将公用的scss引入到每一个文件中（当然如果你仅仅用于 css ，自然可以将全局样式放到 app.vue 中）。

scss 为我们提供了变量、混合、继承等特性，在页面中我们只需要通过 @import 就可以引入文件，对我们预先定义好的共用样式或属性进行引入到当前的样式表中。

但是由于组件化，我们的文件数量将会非常的多，一个大型页面就可能会拆分出十个以上的组件，我们需要让每个页面都 @import 吗？

解决问题的方式 style-resources-loader

style-resources-loader 的作用

导入css 预处理器的一些公共的样式文件变量，比如：variables , mixins , functions，避免在每个样式文件中手动的@import导入，然后在各个css 文件中直接使用变量。

使用方法

安装

vue add style-resources-loader

配置

在 vue 中，编辑 vue.config.js

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',  // 可选less、sass、scss、stylus
      patterns: [
        './src/style/common.scss' // 需要混入全局的scss文件
      ]
    }
  }
}

具体配置方法可见： https://github.com/yenshih/style-resources-loader

重启

配置完后需要重新启动项目才可生效

npm run serve