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年,共勉,加油,你们有啥问题能够一块儿讨论,共同窗习,共同进步

喜欢的小伙伴点个👍吧,