vue设置全局样式：loadOptions

2021-12-03 17:03:11 阅读：170 来源： 互联网

标签：scss vue sass 样式 js import loadOptions css

vue中全局设置样式有两种方法：

第一种：只需要在main.js中引入

如global.css

html,body,#app{
    height: 100%;
    margin: 0px;
    padding: 0px;
}

在main.js中引入

import "./styles/index.scss";
import './assets/css/global.css'
import './assets/fonts/iconfont.css'

这样所有的vue组件都有了这个公共样式。

第二种：向预处理器 Loader 传递选项

官网解释：https://cli.vuejs.org/zh/guide/css.html#css-modules

有的时候你想要向 webpack 的预处理器 loader 传递选项。你可以使用 vue.config.js 中的 css.loaderOptions 选项。比如你可以这样向所有 Sass/Less 样式传入共享的全局变量：

// 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 name
        globalVars: {
          primary: '#fff'
        }
      }
    }
  }
}

在这里引入全局样式和变量，这样的话，在vue文件的style标签中就不用引入了。

实例：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/styles/mixin.scss";
          @import "@/styles/variables.scss";
        `
      }
    }
  },
}

注意：

如果不在这里全局引入样式和变量，那么在需要用到这些样式和变量的地方，你就需要在vue文件的style标签中引入，如下所示:

<style lang="scss" scoped>
  @import "~@/styles/mixin.scss";
  @import "~@/styles/variables.scss";
  @import "~@/styles/sidebar.scss";

  ....
</style>

使用一些UI组件的时候，为了能自定义主题色，可以在vue.config.js里这样设置：

module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          'primary-color': '#254184', // 全局主色
        }
      }
    }
  }
}

这样能在<style lang="less">中使用该变量：

a {
    color: @primary-color;
}

但是有时候，我需要在js中设置样式，比如绘制canvas。有什么办法可以让我能在js中使用primary-color这个变量呢？

直接import进来使用即可

import config from '../vue.config.js';

export default {
  data() {
    return {
      primaryColor: config.css.loaderOptions.less.modifyVars['primary-color'],
    };
  },

或者用环境变量

// .env
VUE_APP_PRIMARY_COLOR=#254184

在vue.config.js中

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          'primary-color': process.env.VUE_APP_PRIMARY_COLOR
        }
      }
    }
  }
}

在js文件中引入

// sample.js

const primaryColor = process.env.VUE_APP_PRIMARY_COLOR;

标签：scss,vue,sass,样式,js,import,loadOptions,css
来源： https://www.cnblogs.com/zwh0910/p/15638801.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue设置全局样式：loadOptions

第一种：只需要在main.js中引入

第二种：向预处理器 Loader 传递选项