vue-cli 構(gòu)建的項(xiàng)目默認(rèn)是不支持 less 的，需要自己添加础淤。
首選资铡，安裝 less 和 less-loader ，在項(xiàng)目目錄下的這個(gè)文件下安裝node_modules運(yùn)行如下命令
npm install less less-loader --save-dev
安裝成功后边篮，可以先寫一個(gè)less樣式看看生效沒(méi)己莺。如果沒(méi)生效打開?build/webpack.base.conf.js?，在?module.exports =?的對(duì)象的 module.rules 后面添加一段
module.exports = {
? ? //? 此處省略無(wú)數(shù)行戈轿，已有的的其他的內(nèi)容
? ? module: {
? ? ? ? rules: [
? ? ? ? ? //? 此處省略無(wú)數(shù)行凌受，已有的的其他的規(guī)則
? ? ? ? ? {
? ? ? ? ? ? test: /\.less$/,
? ? ? ? ? ? loader: "style-loader!css-loader!less-loader",
? ? ? ? ? }
? ? ? ? ]
? ? }
}
最后，在代碼中的 style 標(biāo)簽中 加上?lang="less"?屬性即可~
<style lang="less">?里面寫less樣式
</style>
? 引入less樣式? <style lang="less"? src="./styles.less"></style>
