vue config.js配置 css

在Vue的`vue.config.js`文件中，我们可以配置CSS和LESS等样式文件的相关设置。你可以按照以下步骤进行配置：

1. 安装`style-resources-loader`来处理样式资源。可以通过运行以下命令来安装：`npm i style-resources-loader`

2. 在`vue.config.js`中添加LESS的配置。通过`chainWebpack`方法，我们可以在打包过程中对CSS进行一些处理。具体配置如下：

const oneOfsMap = config.module.rule('less').oneOfs.store;
oneOfsMap.forEach(item => {
  item
    .use('style-resources-loader')
    .loader('style-resources-loader')
    .options({
      patterns: './src/style/index.less' // 这里的路径指向你的样式文件
    })
    .end()
})

3. 还可以根据需要对打包文件进行配置，例如处理文件大小等。可以在`configureWebpack`方法中进行相关配置，如下所示：

configureWebpack: (config) => {
  if (process.env.NODE_ENV === 'production') {
    config.mode = 'production';
    config["performance"] = {
      "maxEntrypointSize": 10000000, // 入口文件的最大大小限制
      "maxAssetSize": 30000000 // 资源文件的最大大小限制
    }
  }
}

另外，你还可以使用压缩方法来处理文件大小。将需要压缩的文件以及压缩的类型配置在`productionGzipExtensions`中即可。

以上就是关于Vue的`vue.config.js`文件中设置CSS和LESS的配置方法。希望能对你有所帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span>