怎么在nuxt js中使用.less文件

本教程将介绍如何在nuxt js中使用.less文件的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

怎么在nuxt js中使用.less文件 教程 第1张

问题描述

我在assets/css/myfile.lessNuxt文件夹中创建了一个.less文件,并向其中添加了一些CSS。

.edit-btn-color {
  background-color: #b1c646;
  color: white;
}
.edit-btn-color:hover {
  background-color: darken(#b1c646, 10%);
  color: white;
}

nuxt.config.js中,我执行以下操作:

export default {
  less: ['@/assets/css/myfile.less'],
}

但它不起作用。

推荐答案

由于Nuxt2仍在使用WebPack4,您需要安装less-loader(v8 is using Webpack5)的v7

yarn add less-loader@^7 less

然后,在某个位置创建一个.less文件,如/assets/css/myfile.less

并在nuxt.config.js中与此

一起使用

export default {
  css: ['~/assets/css/myfile.less'],
}

这里使用的密钥是css,scss、sass、less、Stylus等都是一样的,如文档所示:https://nuxtjs.org/docs/2.x/features/configuration#the-css-property

好了关于怎么在nuxt js中使用.less文件的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。