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

Question

我.less在 Nuxt 文件夹中创建了一个文件assets/css/myfile.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，因此需要安装v7 less-loader（v8使用Webpack5）

yarn add less-loader@^7 less

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

并将其nuxt.config.js与此一起使用

yarn add less-loader@^7 less

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