在vue-cli中应用scss/less全局变量

Alex 发布于2019-08-23 16:20 / 2620人阅读

摘要：首先需要安装插件修改的，找到的加载设置修改为，这里的路径即是我们定义全局变量的地方修改的，找到的加载设置这里的路径即是我们定义全局变量的地方替换成上面自定义的函数更多详细知识介绍请访问我的个人主页

首先需要安装插件：sass-resources-loader

npm i sass-resources-loader --save-dev

scss: 修改vue-cli的build/utils.js，找到scss的加载设置：

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders("less"),
    sass: generateLoaders("sass", { indentedSyntax: true }),
    scss: generateLoaders("sass"),
    stylus: generateLoaders("stylus"),
    styl: generateLoaders("stylus")
  }

修改为：

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders("less"),
    sass: generateLoaders("sass", { indentedSyntax: true }),
    scss: generateLoaders("sass").concat({
      loader:"sass-resources-loader",
      options:{
        resources:path.resolve(__dirname,"./../src/assets/scss/base.scss")，// 这里的路径即是我们定义全局变量的地方
      }
    }),
    stylus: generateLoaders("stylus"),
    styl: generateLoaders("stylus")
  }

less: 修改vue-cli的build/utils.js，找到less的加载设置：

function lessResourceLoader() {
        var loaders = [
            cssLoader,
            "less-loader",
            {
                loader: "sass-resources-loader",
                options: {
                    resources: [
                        path.resolve(__dirname, "../src/assets/styles/common.less"),// 这里的路径即是我们定义全局变量的地方
                    ]
                }
                        }
        ];
        if (options.extract) {
            return ExtractTextPlugin.extract({
                use: loaders,
                fallback: "vue-style-loader"
            })
        } else {
            return ["vue-style-loader"].concat(loaders)
        }
    }
    
    less: generateLoaders("less") 替换成上面自定义的函数 less: lessResourceLoader()

更多详细知识介绍请访问我的个人主页

GPU云服务器云服务器在c语言中全局变量在js中怎么打印变量全局变量在深度学习中的应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102928.html

vue-cli安装和vs code 的相关配置

摘要：在本文之前，先给大家讲一下接下来需要安装的东西和他们之间的联系。的安装一安装的官网下载的安装包。在或中执行命令。以上，就是和的安装与配置在本文之前，先给大家讲一下接下来需要安装的东西和他们之间的联系。 node: node是js服务执行的环境，通常我们使用node实现前端的工程化。前端工程化有很多工具可以实现，比如webpack、glup等，他们都是基础node进行开发的。 w...

Loong_T 2019-08-23 14:46 评论0 收藏0
webpack开发与生产环境配置

摘要：豹哥对于刚开始小白的自己虽然现在也白知无不谈，而且回复超快超认真。这里真的很感谢豹哥。是项目启动时的一些文件，如的配置文件开发环境服务配置文件一些简单工具函数等等。是关于整个项目的环境配置包括开发与生产。前言作者去年就开始使用webpack, 最早的接触就来自于vue-cli。那个时候工作重点主要也是 vue 的使用，对webpack的配置是知之甚少，期间有问题也是询问大牛 @吕大...

afishhhhh 2019-08-20 18:32 评论0 收藏0
关于sass、scss、less的概念性知识汇总

摘要：而使用预处理器，提供缺失的样式层复用机制减少冗余代码，提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，预处理器有没有解决更大的麻烦。也是成熟的预处理器之一，而且有一个稳定，强大的团队在维护。这篇文章主要解答以下几个问题，供前端开发者的新手参考。 1、什么是Sass和Less？ 2、为什么要使用CSS预处理器？ 3、Sass和Less的...

HmyBmny 2019-08-29 16:24 评论0 收藏0
关于sass、scss、less的概念性知识汇总

摘要：而使用预处理器，提供缺失的样式层复用机制减少冗余代码，提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，预处理器有没有解决更大的麻烦。也是成熟的预处理器之一，而且有一个稳定，强大的团队在维护。这篇文章主要解答以下几个问题，供前端开发者的新手参考。 1、什么是Sass和Less？ 2、为什么要使用CSS预处理器？ 3、Sass和Less的...

xuweijian 2019-08-02 11:15 评论0 收藏0
在原生CSS中使用变量

摘要：而现在，我们可以在原生中使用变量了先来两个在线感受一下定义变量，也称为自定义属性。但是局部变量只能够在被申明的元素及其子元素中使用。在中使用变量变量是的一部分，这意味着我们可以通过来访问修改变量的值，这是等预处理器所做不到的。本文首发于我的博客一直以来，CSS作为一种申明式的样式标记语言，很难像如javascript等命令式编程语言一样通过定义和使用变量的方式来维护和追踪某些状态。...

FreeZinG 2019-08-30 14:03 评论0 收藏0