nuxt如何使用less编写样式?

ppylox
·10/11/2020·7 阅读
AI 摘要模型根据正文自动生成,仅供参考

在 Nuxt 中使用 Less 编写样式,只需两步:先通过 npm install less less-loader --save-dev 安装依赖,然后在 Vue 组件中写 style 标签并加上 lang="less"(可配合 scoped),即可直接使用 Less 的嵌套等语法,无需额外配置即可生效。

\n
\n\n\n\n

第一步   安装

\n\n\n\n

npm install less less-loader --save-dev

\n\n\n\n

第二步  使用  

\n\n\n\n
<style scoped lang="less">
.container{
margin: 100px 0 ;
border-top: 1px solid #7f828b;
p{
font-size: 22px;
color: red;
line-height: 30px;
text-align: center;
}
.dsiab.com{
display: flex;
justify-content: space-around;
.flexDiv{
text-align: center;
color: blue;
}
}
}
不用配置其他就可以生效了。
\n

相关文章