Question

我正在使用Rails 5.2应用程序，并且有一个pointer-events: none;文件充满了单个导入

application.scss

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

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

但是，这失败了。运行@import '../stylesheets/components/*';时出现以下错误：

bin/webpack

Answer 1

如ErvalhouS所述，您必须使用将启用此功能的导入器。

安装导入程序：

yarn add node-sass-glob-importer

然后配置sass loader（默认情况下与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

除非使用some plugin to enable glob importing，否则SASS或SCSS不支持全局导入。

在有关SASS或SCSS导入顺序的问题中，您需要对其进行显式或以未定义的变量或混入为结束。

没有内置功能可以执行您想要的操作。您可以将文件转换为.erb并循环播放，也可以执行一些JS魔术操作来导入所有文件。

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

2 个答案: