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) ] } } }
