一.安裝less-loader依賴:
????????npm install less less-loader --save-dev
二.在build/webpack.base.conf.js文件中進(jìn)行配置:
? ??????位置: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' 就可以使用less進(jìn)行樣式嵌套了:
? ??????<style lang="less" scoped>
????????? .header {
????????????????????????height:80px;
? ? ????????????????????width:100%;
? ? ????????????????????p{
????????????????????????????text-decoration:underline;
? ? ????????????????????}
????????????????????}
????????</style>
