vue 引入全局less

原创已于 2022-04-11 00:44:13 修改 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2022-04-11 00:42:46 首次发布

这篇博客介绍了如何在Vue CLI项目中安装并配置style-resources-loader，以便引入全局的less样式文件。通过`npm install`添加所需依赖，然后在vue.config.js中设置配置项，加载指定路径下的global.less文件，实现全局样式覆盖。

安装

~npm i less-loader~

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

##配置

const { defineConfig } = require('@vue/cli-service')
const path = require("path");
module.exports = defineConfig({
  transpileDependencies: true,
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 这个是加上自己的路径,不能使用(如下:alias)中配置的别名路径
        path.resolve(__dirname, './src/assets/css/global.less')
      ]
    }
  }
})