• Vue中使用Sass全局变量


    前言

    假设我们原有项目的主题色是蓝色的,这时有个需求,需要把主题色改成橙色的。一般情况下,我们可能会在main.js中引入公共样式文件,但你会发现,在组件中使用公共样式文件中定义的某个参数时,会报一个错误:"变量未定义"。

    那还有一种写法是,在每个组件中都引入公共样式(注:需要用到公共样式的组件),但这样写,感觉代码会很不perfect 。

    那有没有什么办法,只要公共样式引入一次,即可在全部组件中使用呢?

    方法一:使用sass-resources-loader解决Sass全局变量问题

    sass-resources-loader可以访问sass资源任何一个需要访问的sass模块。所以,可以使用共享变量和混合所有SASS样式,而不去每个文件都引用。

    1.安装sass-resources-loader

    npm install sass-resources-loader --save-dev

    2.相关配置

    在build文件夹下,找到util.js文件,然后配置相关代码。首先新增两个函数:

    //简化路径
      function resolveResource(name){
        return path.resolve(__dirname,'../static/css/'+name)
      }
    
      function generateSassResourceLoader(){
        var loaders = [
          cssLoader,
          'sass-loader',
          {
            loader: 'sass-resources-loader',
            options: {
              // 多个文件时用数组的形式传入,单个文件时可以直接使用 path.resolve(__dirname, '../src/init.scss'
              resources: [resolveResource('init.scss')]  
            }
          }
        ]
        if (options.extract) {
          return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader'
          })
        } else {
          return ['vue-style-loader'].concat(loaders)
        }
      }

    然后在util.js文件中找到下面的代码,把“generateSassResourceLoader”方法替换到sass和scss属性中,代码如下(注释掉那一句是默认代码):

    return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less: generateLoaders('less'),
        // sass: generateLoaders('sass', { indentedSyntax: true }),
        sass:generateSassResourceLoader(),//引用上面的配置方法
        scss: generateSassResourceLoader(),//引用上面的配置方法
        stylus: generateLoaders('stylus'),
        styl: generateLoaders('stylus')
      }

    配置完后,重新启动一下项目,就可以在其它组件中使用全局变量了。

    方法二:使用vue-cli 3

    在vue.config.js文件中配置css.loaderOptions 选项,这边就直接贴官网上的代码了,官网地址:灰机直达

    引入多个的话,在data属性中,分号后面直接添加即可。

    sass: {
            // @/ 是 src/ 的别名
            // 所以这里假设你有 `src/variables.scss` 这个文件
            data: `
                     @import "~@/variables.scss";
                     @import "~@/test.scss";
                  `
    }

    方法三:直接在App.vue中引入公共样式文件,但不能添加scoped

    参考地址:

    https://blog.csdn.net/qq_27868533/article/details/79651659

    https://www.jianshu.com/p/a0a19ae0c737

  • 相关阅读:
    Drcom账户管理Server端解说
    Hadoop常见异常及其解决方式
    PHP 获取网络接口文件流
    【刷题小记67】三角形面积
    Tiny语言编译器简单介绍
    矩阵十题【六】 poj3070 Fibonacci
    函数名称
    设计模式--6大原则--开闭原则
    LeetCode96:Unique Binary Search Trees
    [Swift]LeetCode958. 二叉树的完全性检验 | Check Completeness of a Binary Tree
  • 原文地址:https://www.cnblogs.com/Mrrabbit/p/11180287.html
走看看 - 开发者的网上家园