如何使用 webpacker 在 Rails 中导入 **/* glob scss

Question

我正在使用 Rails 5.2 应用程序，并且有一个application.scss文件填充了各个导入

@import '../stylesheets/pages/home';
@import '../stylesheets/pages/product_details';
@import '../stylesheets/pages/cart';
@import '../stylesheets/pages/downloads';

这既费力又容易出错，所以我更喜欢使用通配符

@import '../stylesheets/components/*';

然而，这失败了。当我运行时bin/webpack，出现以下错误：

ERROR in ./app/webpacker/stylesheets/application.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/lib/loader.js??ref--7-3!./app/webpacker/stylesheets/application.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import '../stylesheets/components/*';
^
File to import not found or unreadable: ../stylesheets/components/*.

Answer 1

正如 ErvalhouS 所提到的，您必须使用一个导入器来启用此功能。

安装导入器：

yarn add node-sass-glob-importer

然后配置 sass 加载器（默认随 Webpacker 安装）以在解析 css 文件时使用它：

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

environment.loaders.get('sass')
  .use
  .find(item => item.loader === 'sass-loader')
  .options
  .sassOptions = {importer: globCssImporter()};

然后您可以在 application.scss 文件中导入目录

@import '../stylesheets/components/**/*.scss';

如果加载顺序存在问题，则首先在 application.scss 中以正确的顺序加载所需的文件应该可以解决该问题

@import '../stylesheets/components/defaults.scss'
@import '../stylesheets/components/**/*.scss';

Answer 2

除非您使用某些插件来启用 glob 导入，否则 SASS 或 SCSS 不支持 glob 导入。

在 SASS 或 SCSS 导入顺序问题中，您需要明确说明，否则最终会出现未定义的变量或混合。

没有内置功能可以完成您想要的操作。您可以将文件转换为.erband 循环，或者执行一些 JS 魔法来导入所有文件。