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

Question

我在 assets/css/myfile.less Nuxt 文件夹中创建了一个 .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'],
}

但是不行。

Answer 1

由于Nuxt2还在使用Webpack4，需要安装less-loader的v7(v8 is using Webpack5)

yarn add less-loader@^7 less

然后，在某处创建一个.less文件，比如/assets/css/myfile.less

并在 nuxt.config.js 中使用它

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

这里使用的key是css，SCSS、SASS、Less、Stylus等都一样，如文档所示：https://nuxtjs.org/docs/2.x/features/configuration#the-css-property

How to use .less file in nuxt js