vue2.x搭建saas项目系列之四：styles统一管理

此篇幅主要介绍、我们是如何做样式的统一管理，如有不足和建议请留言，在此感谢，项目目前阶段还处在少年，一直在迭代，CSS 预处理器选择了 Less 

样式目录结构如图 

根据命名应该可以了解到每个文件对应的内容

这里也介绍下，Vue自动化导入文件 (用于颜色、变量、mixin……)，style-resources-loader的使用

1. 插件安装

 方法1：分开安装

• 安装style-resources-loader

官方安装及使用文档：https://www.npmjs.com/package/style-resources-loader#resolveurl

npm i style-resources-loader

• 安装vue-cli-plugin-style-resources-loader

官方安装及使用文档：https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader

npm i vue-cli-plugin-style-resources-loader

 方法二：直接使用vue add style-resources-loader安装

vue add style-resources-loader

2.插件使用

pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, 'src/styles/_variables.less'),
        path.resolve(__dirname, 'src/styles/_mixins.less'),
        path.resolve(__dirname, 'src/styles/_class_template.less'),
      ]
    }
  },

到此，styles统一管理-文章结束，原创不易，感谢浏览！