vue 使用 less及相关配置

安装相关依赖【基于vux】组件

// 安装 vux
npm install vux --save

// 安装 less-loader
npm install less less-loader --save

// 安装vux-loader 对.vue代码进行预处理，使其不限于 vux 组件库
npm install vux-loader --save-dev

修改webpack.config.js文件

配置 rules里面的 loader加载依赖，让其支持外部的less,在原来的代码上添加

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

并且引入vux-loader，修改其如下，这里的 theme.less 就是自己的less文件

const vuxLoader = require('vux-loader');

const webpackConfig = {···} // 里面代码保持不变

module.exports = vuxLoader.merge(webpackConfig, {
  // plugins: ['vux-ui']
  plugins: [
    {name:'vux-ui'},
    {name:'less-theme',path:'../src/assets/theme.less'},
    {name: 'duplicate-style'}
  ]
});

使用，这里的 @config-color；就是 less 文件里的配置项

<style scoped lang="less">

.index{
    color: @config-color;
}

</style>

 

 

备用方案

// 安装 sass-resources-loader  其作用是在组件中使用全局变量

npm i sass-resources-loader --save-dev


// 修改其 build/utils.js

将  less: generateLoaders('less') 改为

less: generateLoaders('less').concat({
   loader: 'sass-resources-loader',
   options: {
     resources: path.resolve(__dirname, '../src/assets/theme.less')
   }
})

 同样，这里的 theme.less 为自己的 less 文件