vue-cli 使用less - Kaiqisan

ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである.这次讲讲vue脚手架中的less的使用

前排提示：现在的vue脚手架有多个版本，现在按照大版本来划分，分为vue-cli2 vue-cli3 vue-cli4
每个版本有每个版本的方法。

vue-cli2的处理方法

vue-cli2项目在添加的时候没法自动添加less，需要手动添加.

npm i less-loader@5.0.0 less --save-dev

这里指定了less-loader版本，防止导致兼容性的错误。

然后再打开项目文件下的配置文件 build/webpack.base.conf.js 然后找到 module项，添加下面的语句(如果妹学过webpack的就依样画葫芦，上面怎么写，你就怎么写)

{
    
    
    test: /\.less$/,
    loader: ['style-loader, css-loader, less-loader'],
    exclude: /node_modules/,
}

到这里，配置已经完成了，然后就可以投入使用了！

.....
<style lang="less" scoped>
    ......
</style>

vue-cli3 和 vue-cli4 的处理方法

vue-cli3之后，人家的脚手架就不使用webpack 配置不使用webpack.config.js 也不使用webpack-dev-server来热启动项目，而全部使用自己的东西—vue-cli-service，最重要的是，在创建项目前，它会给您自我配置项目的机会，（是否使用babel eslint等等的），我们也可以在一开始的初始化中来选择是否来使用less来编译样式。

下图为选择配置，要把css Pre-processors 选上。

问你使用哪一种css预处理语言。

这样之后，脚手架就自动把所有的工作做完，就没有您什么事情了！大胆使用就行了！

这样有人肯定会问：”哎，我忘记使用less怎么办？又不想重构项目！“

对不起，这是没法后期添加的，如果临时要添加的话建议重构项目，工作量不会太大（复制粘贴工程），记得在创建项目的时候添加上去喔！

总结

没有总结