less自定义变量以及全局使用，scss的全局使用

less和scss的全局使用

方法一

1.文件夹

然后在index.css文件中引入

@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';

接着main .js全局引入即可全局生效

方法二

1.在assets文件夹下创建–>base–>variable.less,如下

//这些都是less的自定义变量,都在可以全局使用
@data-color-cyan: #70FFE1;
@data-color-green: #00D08F;
@data-color-orange: #FA6400;
@user-state-orange: #FE824C;

@big-size: 30px;
@large-size: 25px;
@default-size: 20px;
@small-size: 15px;
@mini-size: 10px;

2.在build文件夹的utils.js进行配置,配置过后才能全局使用,
找到exports.cssLoaders = function (options) {},把配置写在里面:

 function lessResourceLoader() {
    var loaders = [
      cssLoader,
      'less-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          resources: [
          //这是你自定义less的变量的路劲
            path.resolve(__dirname, '../src/assets/less/base/variable.less'),
          ]
        }
      }
    ];
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }
  //最后把 lessResourceLoader('less')放在下面,替换原先的less:xxxx
    return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: lessResourceLoader('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

3.less变量的使用:

.yn-default-wrapper{
  padding: @small-size;
  background: #fff;
}
.title{
  border-bottom: 1px solid @yn-color-theme;
}

上面是Vue-cli2.0以上版本的配置，vue-cli3.0的配又有点不同所以也记录一下：

1. less文件的创建随意，想在哪里创建都可以，我一般都是在assets文件夹下
2. vue-cli3.0我是在vue.config.js文件下配置的，详情代码如下：

module.exports = {
  chainWebpack: config => {
    const types = ["vue-modules", "vue", "normal-modules", "normal"];
    types.forEach(type =>
      addStyleResource(config.module.rule("less").oneOf(type))
    );
  },
}
function addStyleResource(rule) {
  rule
    .use("style-resource")
    .loader("style-resources-loader")
    .options({
      patterns: [
        // 需要全局导入的less路径，自己修改
        path.resolve(__dirname, "./src/assets/style/base/component.less"),
        path.resolve(__dirname, "./src/assets/style/base/element_revise.less"),
        path.resolve(__dirname, "./src/assets/style/base/index.less"),
        path.resolve(__dirname, "./src/assets/style/base/reset.less")
      ]
    });
}