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-01-06 23:02:42

    Updating Homebrew... 更新了镜像依然卡死

    使用brew install [软件包]安装软件包时,卡在Updating Homebrew... 或输入`brew update`更新brew,半天没反应.产生原因一般是在国内访问官方 更新源获取资源太慢,解决方案可以采用更换国内镜像更新源.

  • 2020-01-07 10:06:00

    vue重定向beforeRouterEnter与replace的使用

    一个登录页面,只有第一次才会出现,一旦出现过,以后再也不会出现,即使是输入该页面的url也不会跳转到该页面,只会跳转到指定的其他页面;

  • 2020-01-07 10:14:07

    vue强制刷新组件 销毁和重建

    很多时候,通过重置数据将页面重置时,子组件可以提供重置的方法,或者提供props重置自己的状态。但是相对麻烦,那可以使用强制刷新来实现刷新组件。

  • 2020-01-07 10:17:42

    vue钩子函数beforeRouteUpdate没有反应

    由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 可以访问组件实例 `this`

  • 2020-01-08 13:23:24

    vue 中使用eventbus

    为了提高组件的独立性和重用性,父组件会通过props向下传数据给子组件,当子组件又事情要告诉父组件时用通过$emit事件告诉父组件,如此确保每个组件都是独立在相对隔离的环境中运行,可以大幅度提高组件的可维护性

  • 2020-01-08 13:30:30

    vue中eventbus被多次触发(vue中使用eventbus踩过的坑)

    一开始的需求是这样子的,我为了实现两个页面组件之间的数据传递,假设我有页面A,点击页面A上的某一个按钮之后,页面会自动跳转到页面B,同时我希望将页面A上的某一些参数携带过去给页面B。 然后我就想,这不就是不同组件之间的数据传递问题而已吗?直接用bus 巴士事件来传递数据不就行了吗。于是,我就很愉快地进行了。关于vue中的eventbus的使用,我之前在一篇vue中的数据传递中有提到过。