0

我想在我的 Nuxt 项目中导入一个 SCSS 文件。

为此，我尝试按照文档在其中简单地将带有文件名的路径添加到 css 文件中：

nuxt.config.js

css: ['@/scss/_introPage.scss]

但它给出了错误

找不到模块“../scss/_introPage.scss”

我的文件夹结构：

> components
> pages
> scss > _introPage.scss
> static
> store
> test
> nuxt.config.js
> package.json

如何包含 SCSS 文件并将全局 CSS 应用到我的项目中？

如果有人需要任何进一步的信息，请告诉我。

4

2 回答 2

0

谢谢大家的意见。

我必须安装 --save-dev sasss sass-loader@10 光纤才能工作。

于 2021-07-29T05:26:34.967 回答
0

cssNuxt.js 通过 nuxt.config.js 中的选项提供了一种共享全局 CSS 文件的好方法

例子：

// nuxt.config.js
export default {
  
  // other options
  
  css: [
      // Load a Node.js module directly (here it's a Sass file)
     'bulma',
     // CSS file in the project
     '@/assets/css/main.css',
     // SCSS file in the project
     '@/assets/css/main.scss'
  ],
  
  // other options

}

在您的情况下，您需要添加 sass 和 sass-loader 以在您的项目中加载 sass、scss、less &... 文件。

SASS: yarn add sass-loader sass
LESS: yarn add less-loader less
Stylus: yarn add stylus-loader stylus

分享您的全局样式文件（scss、sass 和 ...）和其他可以使用Nuxt 样式资源的好功能。

在所有样式文件中共享变量、mixins、函数（不需要@import）

使用以下命令中的一个向您的项目添加@nuxtjs/style-resources依赖项：yarnnpm

yarn add -D @nuxtjs/style-resources或者npm install --save-dev @nuxtjs/style-resources

然后你可以在 nuxt.config.js 文件中添加'@nuxtjs/style-resources'选项buildModules导入你的全局 scss 文件，如下所示：

// nuxt.config.js
export default {

   // other options

   buildModules: [
   '@nuxtjs/style-resources',
   ],

   styleResources: {
      // your settings here
      scss: ['@/assets/scss/_introPage.scss'],
      sass: [],
      less: [],
      stylus: [],
      hoistUseStatements: true  // Hoists the "@use" imports. Applies only 
      to "sass", "scss" and "less". Default: false.
   }

   // other options

}

有关更多信息，请参阅此链接https://www.npmjs.com/package/@nuxtjs/style-resources

于 2021-07-30T09:54:17.863 回答