参考资料 Working with CSS | Vue CLI vue-cli-plugin-style-resources-loader - npm 预先准备

若项目正在运行,需要先停止。

安装依赖和修改 vue.config.js 需要重新启动项目以生效。

安装 less 和 less-loader。

若已安装则可忽略(例如使用 Vue CLI 创建项目时选择了 Less CSS 预处理器)。

npm install less less-loader --save-dev # 可以简写为 npm i less less-loader -D 方式一、手动配置

安装 style-resources-loader。

npm install style-resources-loader --save-dev

修改项目根目录下的 vue.config.js 文件(若无则创建)。

以使用 src/assets/css/global.less 和 src/assets/css/variables.less 文件为例。

const path = require('path'); function addStyleRes({ config = null, processor = '', patterns = [] }) { if (!config) { return; } const rule = config.module.rule(processor); const types = ['normal', 'normal-modules', 'vue', 'vue-modules']; types.forEach((type) => { rule.oneOf(type) .use('style-resources-loader') .loader('style-resources-loader') .options({ patterns }); }); } module.exports = { chainWebpack: (config) => { addStyleRes({ config, processor: 'less', patterns: [ path.resolve(__dirname, 'src/assets/css/global.less'), path.resolve(__dirname, 'src/assets/css/variables.less'), ] }); }, }; 方式二、使用插件

安装 style-resources-loader 插件。

注意:
安装该插件时会自动修改 vue.config.js 文件,建议先使用 Git 暂存或提交当前的更改后再安装。
安装过程中可能会弹出 CSS 预处理器选择菜单,根据实际情况选择即可。

vue add style-resources-loader

根据需要修改 vue.config.js 文件。

以使用 src/assets/css/global.less 和 src/assets/css/variables.less 文件为例。

const path = require('path'); module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns: [ path.resolve(__dirname, 'src/assets/global.less'), path.resolve(__dirname, 'src/assets/variables.less'), ], }, }, };