npm添加less less-loader sass-resources-loader
修改nuxt.config.js
build: {
transpile: [/^element-ui/],
extend(config, ctx) {
const sassResourcesLoader = {
loader: 'sass-resources-loader',
options: {
resources: ['assets/style/theme.less', 'assets/style/mixins.less']
}
}
config.module.rules.forEach(rule => {
if (rule.test.toString() === '/\\.vue$/') {
rule.options.loaders.less.push(sassResourcesLoader)
}
if (rule.test.toString() === '/\\.less$/') {
rule.use.push(sassResourcesLoader)
}
})
}
}
如何使用
<style lang="less" scoped>
div {
width: 100%;
height: 100px;
text-align: center;
line-height: 100px;
p {
font-weight: bold;
color: aqua;
font-size: 30px;
}
}
</style>