vue-cli3+项目配置全局CSS样式文件方案总结

vue-cli3+项目配置全局CSS样式文件方案总结

1.需求背景

• 最近新建的vue项目中需要全局配置css样式，这样就不用在每一个vue文件中都写一遍或引用一遍。

2.解决方案

• 实现这样的需求常用的有两种方案：

• 第一种：新建公共css样式文件，然后在项目的main.js中引用。

• 第二种：通过插件style-resources-loader来实现，具体如下：

• 
  // 1.通过npm下载插件style-resources-loader、vue-cli-plugin-style-resources-loader：
  > npm install style-resources-loader vue-cli-plugin-style-resources-loader --save -D
  
  // 2.进入vue.config.js文件进行以下配置：
  const path = require('path')
  module.exports = {
     pluginOptions: {
      'style-resources-loader': {
        preProcessor: 'less', // 预编译处理语言
        // 这三种 patterns 写法都是可以的
        // patterns: ["./src/assets/reset1.less", "./src/assets/reset2.less"]
        // patterns: "./src/assets/reset.less"
        patterns: [
          // 两种路径写法都可以，这里的路径不能使用 @ 符号，否则会报错
          // path.resolve(__dirname, './src/assets/reset.less')
          path.resolve(__dirname, 'src/assets/reset.less')
        ]
      }
    }
  }