vue-cli2.0实现引入全局css样式

一步步的实现vue-cli2.0引入全局css样式。

引入less 和 sass-resources-loader

npm install less less-loader --save

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

进入build > utils.js

找到函数 generateLoaders(声明函数处) 将以下代码复制到此函数后面

function lessResourceLoader() {
     
      var loaders = [
          cssLoader,
          'less-loader',
          {
     
              loader: 'sass-resources-loader',
              options: {
     
                  resources: [
                      path.resolve(__dirname, '../src/assets/style/public.less'),
                  ]
              }
                      }
      ];
      if (options.extract) {
     
          return ExtractTextPlugin.extract({
     
              use: loaders,
              fallback: 'vue-style-loader'
          })
      } else {
     
          return ['vue-style-loader'].concat(loaders)
      }
}

复制完成的代码样子是

)

修改参数

然后将generateLoaders函数在调用时的参数为less的修改成less: lessResourceLoader(‘less’)。具体见下图

声明全局变量

然后在 public.less 中声明less变量。具体见下图

调用全局变量

现在在任意一个 .vue文件中都可以调用上面声明的变量。具体见下图

ok，全部完成了。

如有疑问，请回复给我吧。哪怕一个错字呢。汪
——二哈