Vue组件中使用Sass或者Less全局变量

2020-02-22 18:03:10

参考地址 Vue组件中使用Sass或者Less全局变量

本文以Sass做案例,Less的参考,基本配置大同小异。
假如我们有一个Sass的全局变量common.scss文件,路径 ../style/common.scss 代码如下:

@mixin t-button($color,$background) {
    color:$color;
    background:$background;
    padding:5px 10px;}

现在我们想在一个vue文件里引用这个全局样式,怎么办呢?我们能按下边的方法导入。

<style>@import '../style/common.scss';button{
  @include t-button(#fff,blue);}</style>

但是这样有一个问题,如果还有其他vue页面也想用这个全局的common.scss文件,我们还需要在使用的vue页面里再次按照上面的方法引入,那么问题来了,如果我更改了这个common.scss文件的路径,那么每次我还要去修改所有的vue页面里的common.scss文件文件路径。有什么好的方法呢,让我一次引入,所有的vue页面均可以自动引用?
1.添加依赖

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

在项目build文件夹里找到utils.js ,定位到下边代码

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

把上面这句scss: generateLoaders('sass'),改成如下

scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/css/all.scss')//这里按照你的文件路径填写
        }
      }
    )

OK,完成,修改后的代码是

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/css/all.scss')//这里按照你的文件路径填写
        }
      }
    ),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

这样就可以在所有的scss文件或者vue文件运用全局的scss,而不需要在单独引入。



  • 2020-04-12 17:42:43

    Node.js设置CORS跨域请求中多域名白名单的方法

    在Node.js中,res的响应头Header中的 Access-Control-Allow-Origin 属性不能匹配除 (*) 以外的正则表达式的,域名之间不能也用逗号分隔。也就是说, Access-Control-Allow-Origin 的属性值只允许设置为单个确定域名字符串或者 (*)。

  • 2020-04-14 09:40:59

    CSS3实现文字描边的2种方法

    首先想到去看CSS3有没有什么属性可以实现,后来被我找到了text-stroke     该属性是一个复合属性,可以设置文字宽度和文字描边颜色      该属性使用很简单:text-stroke:1px #f00;(1px是文字宽度,#ff是文字描边颜色)

  • 2020-04-14 09:42:47

    用 TypeScript 编写 npm 模块

    自从开始使用 Node.js 已经一年多,写的代码越多,越是觉得自己提高的越慢。想来应该有没有将单一功能的代码封装在一个独立模块,而导致代码稍微多一点就维护困难的原因。

  • 2020-04-14 09:46:25

    TypeScript 入门教程

    TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查。 TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译。

  • 2020-04-14 09:51:03

    package.json 字段说明

    package.json 有很多字段,也有很多官方字段,我们需要知道他们的具体是做什么的才能很好的运用

  • 2020-04-14 15:35:52

    caniuse前端兼容性检查和使用

    相信大家都曾用caniuse网站查询过css、js的一些兼容性问题,并且都从它反馈的兼容性数据中获益,让我们的线上项目更加稳定、和谐的跑在用户电脑里。不过对于caniuse页面上的一些细节,我们可能会感到困惑或者模棱两可,今天就带着大家一起来重新认识caniuse这个网站,并对它的原理和细节做些探究。

  • 2020-04-15 17:00:07

    export和import的理解,这一篇问扎根就够了

    在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。