Vue/cli项目全局css使用

第一步：创建css文件

在合适的位置创建好css文件，文件可以是sass/less/stylus...

第二步：响预处理器loader传递选项

//摘自官网，引入样式
// vue.config.js
module.exports = {css: {loaderOptions: {// 给 sass-loader 传递选项sass: {// @/ 是 src/ 的别名// 所以这里假设你有 `src/variables.sass` 这个文件// 注意：在 sass-loader v8 中，这个选项名是 "prependData"additionalData: `@import "~@/variables.sass"`},// 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效// 因为 `scss` 语法在内部也是由 sass-loader 处理的// 但是在配置 `prependData` 选项的时候// `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号// 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置scss: {additionalData: `@import "~@/variables.scss";`},// 给 less-loader 传递 Less.js 相关选项less:{// http://lesscss.org/usage/#less-options-strict-units `Global Variables`// `primary` is global variables fields nameglobalVars: {primary: '#fff'}}}}
}

第三步：在需要用动态样式的页面直接使用