问题

当我们使用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

一个爱搞事情的前端,一个爱玩技术的程序员