如何在nuxt js中使用.less文件

我在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