如何在 Vue Nuxt 项目中导入整个 SCSS 文件夹？

Posted 2023-02-22

【中文标题】如何在 Vue Nuxt 项目中导入整个 SCSS 文件夹？

【英文标题】：How to import whole SCSS folder in Vue Nuxt project?

【发布时间】：2019-09-25 05:39:25

【问题描述】：

在我的公司，我们不会在 Vue 文件中编写 css，我们更喜欢使用SCSS 的旧方式。

问题是，每当我们创建新组件时，我们最终都需要在 styles.scss 中编写新的导入，这真的让我在更大的项目中感到烦恼。

不久前，当我在 React 中进行开发时，我在 webpack.config 文件中导入了名为 node-sass-glob-importer 的模块，稍微调整了一下 (you can check here) 并且它起作用了 - 我可以像这样导入文件夹：@ 987654326@

在 Nuxt，我只有 nuxt.config.js 文件，我有点迷茫。我知道如何在那里扩展一些简单的东西，但这似乎更复杂。

导入node-sass-glob-importer 或以其他方式做同样的事情有什么帮助吗？

【参考方案1】：

使用https://github.com/nuxt-community/style-resources-module 怎么样：

export default 
  modules: ['@nuxtjs/style-resources'],
  styleResources: 
    scss: [
      './assets/yourFolder/*.scss'
    ]
  

【讨论】：

谢谢，它可以工作，即使对于来自 node_modules 的外部模块也是如此。 :) 我只是想知道。我仍然需要css: ['~/assets/style/style.scss'], 才能工作，但为什么呢？该文件现在是空的，因为我将所有导入都移到了 nuxt.config.js。

现在我意识到每次创建新的scss文件时，我都需要手动重启服务器，因为它不会自行更新。现在这只是缺点，希望我可以在创建新文件时以某种方式强制服务器重新加载，就像我在 nuxt.config.js 中更改某些内容时一样

请检查警告github.com/nuxt-community/style-resources-module#warning - 如果您将其用于样式，则说明您使用的模块有误

【参考方案2】：

你可以像这样在 Nuxt 中使用node-sass-glob-importer：

nuxt.config.js：

const globImporter = require('node-sass-glob-importer');

export default 
  ...
  css: [
    '~/assets/scss/global.scss'
  ],
  ...
  build: 
    extend(config, loaders: scss) 
      const sassOptions = scss.sassOptions || ;
      sassOptions.importer = globImporter();
      scss.sassOptions = sassOptions;
    
  

global.scss：

@import "./assets/scss/base/*";
@import "./assets/scss/components/*";

styleResources 用于您希望在 SCSS 中的任何位置使用而无需导入文件的变量、mixin 和函数。