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

问题描述

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

但它不起作用。

解决方法

由于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