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

bis0qfac 于 2022-12-14 发布在 Vue.js

关注(0)|答案(2)|浏览(356)

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

但它不起作用。

vue.js

来源：https://stackoverflow.com/questions/67587481/how-to-use-less-file-in-nuxt-js

2条答案

按热度按时间

b09cbbtk1#

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

赞(0）回复(0）举报 2022-12-14

2lpgd9682#

Nuxt v3的答案是：

1.安装更少：npm i less（不需要less-loader）。
1.对于全局样式，请将其添加到nuxt.config.ts，如下所示：

export default defineNuxtConfig({
  css: ['~/assets/less/main.less'],
})

1.在您的组件中，您可以使用Less，如下所示：

<style lang="less" scoped>
@import (reference) '../assets/less/helpers.less';
nav {
  background-color: darkkhaki;
  .my-great-style; /* Imported from helpers.less */
}
</style>

赞(0）回复(0）举报 2022-12-14

我来回答

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

2条答案

相关问题

热门标签

最新问答