Vue使用less并配置全局变量

发表于 | 分类于 |
字数统计: 305 字 | 阅读时长 ≈ 1 分钟

less

less可以让我们更好的高效的使用CSS。

安装

命令行执行如下代码即可安装:

1
npm install less less-loader --save-dev

配置

如果不需要配置全局less那么直接修改webpack.base.conf.js文件即可。

1
2
3
4
{
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader",
}

不过不推荐这样使用,所以可以省略这一步。

全局配置

如果按照以下方法配置,我们可以制定某些样式文件作为全局共有的,从而实现全局less。
首先安装:

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

在build的utils.js文件中,添加如下函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function lessResourceLoader() {
  var loaders = [
    cssLoader,
    'less-loader',
    {
      loader: 'sass-resources-loader',
      options: {
        resources: [
          // 全局less
          path.resolve(__dirname, '../src/common/publicCss.less')  // 这里就是你的全局less文件
        ]
      }
    }
  ];
  if (options.extract) {
    return ExtractTextPlugin.extract({
      use: loaders,
      fallback: 'vue-style-loader'
    })
  }else{
    return ['vue-style-loader'].concat(loaders)
  }
}

并将此文件下的return参数修改如下:

1
2
3
4
5
6
7
8
9
10
11
12
return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    // 原本
    // less: generateLoaders('less'),
    // 修改为
    less: lessResourceLoader(),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

现在即可使用less,并配置全局变量了。