美文网首页
vue中使用全局css变量

vue中使用全局css变量

作者: 羊驼626 | 来源:发表于2019-06-17 19:24 被阅读0次

1.简单粗暴型:直接在main.js(main.ts)中引入即可

import '@/css/main.less';

2.通过配置文件引入(修改配置文件请重启项目)

在vue.config.js文件中添加:

const path = require('path');
module.exports = {
  css: {
    modules: true,
    loaderOptions: {
      // 给 less-loader 传递选项
      less: {
        localIdentName: "'[name]__[local]-[hash:base64:5]'",
        camelCase: true,
      }
    }
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, 'src/css/main.less')], // css文件路径
    },
  },

相关文章

  • vue中实现 ‘换肤 / 切换样式主题’ 功能的三种方式详解(干

    方式1:定义全局的CSS变量 App.vue: demo.vue(css): demo.vue(html): de...

  • Vue全局变量的实现方式

    创建js文件,添加需要使用的全局变量 1、全局变量模块导入方式 2、全局变量挂载到Vue.ptototype中

  • vue中使用全局css变量

    1.简单粗暴型:直接在main.js(main.ts)中引入即可 2.通过配置文件引入(修改配置文件请重启项目) ...

  • 2017.11.15

    Vue.prototypevue——自定义全局方法,在组件里面使用 Vue.prototype 不是全局变量,而...

  • View:在vue中全局加载sass

    如何在vue中引入全局变量?接下来我们一起探索下: 在CSS世界中,SASS/SCSS,LESS,PostCSS是...

  • 在CSS中使用JS变量

    下文中代码为vue代码在css中可以使用在CSS中定义的变量来设置样式,例如: 效果图如下: 上面的变量是在CSS...

  • js -- vue-cli添加less全局配置

    vue-cli添加less全局配置 项目老是引入css变量好麻烦, 加入全局配置就方便多了。 代码如下: 修改文件...

  • vue3 定义全局变量

    在vue2中,我们知道vue2.x是使用Vue.prototype.$xxxx=xxx来定义全局变量,然后通过th...

  • Sass

    sass 在vue-cli3中定义全局变量 注意:老版使用data,新版使用prependData,否则会报错;/...

  • vuex使用记录

    副标题:vuex使用详解、vue使用全局变量、vue使用 store 这篇博客主要记录了 vuex的使用方法,简单...

网友评论

      本文标题:vue中使用全局css变量

      本文链接:https://www.haomeiwen.com/subject/wepzfctx.html