Vue项目全局使用less样式,less

时间过得真快,距离上一篇文章都已经是去年了,以前还想着经常发布些文章来促使进步呢

现在努力也不万,哈哈,进入正题.

大家在编写vue项目时,肯定有很多相同的字体样式,和类名.在这里我教大家使用全局的css样式.

我这里以less文件为例(less还是很好用的)

• 安装less, 这是基础
  

cnpm install less less-loader --save复制代码

• 要想全局使用还需使用一个插件( sass-resources-loader )
  

cnpm i sass-resources-loader
复制代码

• 安装完sass-resources-loader后,咱们还需要简单配置下webpack
  

1. 找到build/utils.js文件
2. 在cssLoaders函数中添加使用全局less函数

function lessResourceLoader() { // 增加全局使用less函数
    var loaders = [
      cssLoader,
      'less-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          resources: [
            path.resolve(__dirname, '../src/style/_color.less'), //定义全局变量的文件路径
          ]
        }
      }
    ];
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }复制代码

3 在return中用lessResourceLoader() (代表的是你写函数所使用的名字,自己可以起任意名字) 替换之前less函数

  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: lessResourceLoader(), // 替换之后
    // less: generateLoaders('less'), // 原webpack配置的
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

复制代码

这三步走之后,就可以了,重新cnpm run dev就?了

注意:

1. 在全局使用less文件时,_color.less文件中只能写自定义的样式及类名

• 例如:
  @color_333: #333;
  @color_666: #666;
  @color_999: #999;复制代码

肯定有小伙伴想着在main.js里全局引用下_color.less也能达到这个效果,这样子是实现不了的,

我当初也是这样想的

2. 小伙伴可以在main.js中引用_index.less文件,在_index.less文件中引用其他样式文件,引用的其他样式文件时,引用样式文件里不能包括@自定义的内容,要不会报错的, 这样做的目的在于有多个样式文件时,不需要在组件页面上单独@import引用,一次搞定

今天就分享到这了,以后一定要坚持分享下去,19年,共勉,加油,大家有啥问题可以一起讨论,共同学习,共同进步

喜欢的小伙伴点个?吧,

转载于:https://juejin.im/post/5c2cc7d16fb9a049a81f6fac