zoukankan      html  css  js  c++  java
  • vue2.0 使用vue-cli搭建项目,引用全局scss,全局注入变量和方法等

    1、如果单纯在main.js中引入global.scss全局样式,不使用全局变量和方法等

    找到 webpack.base.conf.js删掉下面的配置就可以了

    {
        test: /.scss$/,
        loaders: ["style", "css", "sass"]
    }

    使用:main.js引入scss文件    import './assets/style/global.scss'即可。

    2、如果既要引入全局css(scss)样式,又要用到全局变量或者方法,那么就要在步骤1的基础上安装sass-resources-loader插件,然后新建一个var.scss(自己命名)文件专门存放变量或者方法等,例如var.scss:

    @charset "UTF-8";
    
    $themeColor: #409eff;
    
    @mixin ellipsis() {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    然后找到 build/utils.js,将 scss: generateLoaders('sass'),修改为如下:

    scss: generateLoaders('sass')
        .concat(
          {
            loader: 'sass-resources-loader',
            options: {
              resources: path.resolve(__dirname, '../src/assets/var.scss') //这里是单独建的存放变量的scss,我的是 var.scss
            }
          }
        ), 

    使用: main.js  引入   import './assets/style/global.scss';  然后在.vue文件中,可以直接使用 $themeColor 变量 和 ellipsis  公用样式了。

    比如任意一个xxx.vue中可以这样用到

    好了,大功告成。

  • 相关阅读:
    bzoj3932 [CQOI2015]任务查询系统
    bzoj1901 Zju2112 Dynamic Rankings
    bzoj3524 [Poi2014]Couriers/2223 [Coci 2009]PATULJCI
    bzoj1529 [POI2005]ska Piggy banks
    bzoj1552 [Cerc2007]robotic sort
    bzoj2208 [Jsoi2010]连通数
    2016NOI冬令营day5
    A1035 Password (20)(20 分)
    1048 数字加密(20 分)
    福尔摩斯的约会
  • 原文地址:https://www.cnblogs.com/wjunwei/p/9235432.html
Copyright © 2011-2022 走看看