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

拼搏现实的明天。 2023-01-10 01:24 173阅读 0赞

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

样式目录结构如图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70][]

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

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

## 1. 插件安装 ##

###  方法1：分开安装 ###

*  **安装style-resources-loader**

> 官方安装及使用文档：[https://www.npmjs.com/package/style-resources-loader\#resolveurl][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][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统一管理-文章结束，原创不易，感谢浏览！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70]: /images/20221119/505b15d0a5d24797b57dae03c6c424a3.png
[https_www.npmjs.com_package_style-resources-loader_resolveurl]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fstyle-resources-loader%23resolveurl
[https_www.npmjs.com_package_vue-cli-plugin-style-resources-loader]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fvue-cli-plugin-style-resources-loader