Vue手动集成less预编译器

less是一门css预处理语言，简单的说就是在css的基础上提升为可编程性的预编译器

 

需要在项目中安装 less ,less-loader 2个插件，语法为：npm i -D less less-loader

 

然后在 webpack.conf.js 文件中进行如下配置

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
};

 

最后的最后，不要忘了 vue组件里的style标签加上 lang="less" 属性，type可选项，以防万一还是加上把，指不定哪个阶段就有可能用上

 

 

官方文档：

　　　　webpack里的less-loader集成：https://www.webpackjs.com/loaders/less-loader/

　　　　less 官方文档：http://lesscss.cn/features/#extend-feature

　　　　npm 概要文档：https://www.npmjs.com/package/less-loader