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

【问题标题】：How to use .less file in nuxt js如何在 nuxt js 中使用 .less 文件
【发布时间】：2021-08-07 18:22:41
【问题描述】：

我在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'],
}

但它不起作用。

【问题讨论】：

【解决方案1】：

由于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'],
}

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

【讨论】：