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,而不需要在单独引入。



  • 2019-04-10 17:25:21

    Joda-Time详解,最好用的java时间工具

    任何企业应用程序都需要处理时间问题。应用程序需要知道当前的时间点和下一个时间点,有时它们还必须计算这两个 时间点之间的路径。使用 JDK 完成这项任务将非常痛苦和繁琐。

  • 2019-04-18 14:49:20

    Android图片加载框架最全解析,带你全面了解Glide 4的用法

    Glide的最新版本已经出到了4.4.0,可以说Glide 4已经是相当成熟和稳定了。而且也不断有朋友一直在留言,想让我讲一讲Glide 4的用法,因为Glide 4相对于Glide 3改动貌似还是挺大的,学完了Glide 3再去使用Glide 4,发现根本就无法使用。