Rails 的 Webpacker 编译 scss partials

Question

我已经在 https://github.com/joostvanrijn/webpacker 创建了一个示例应用程序来完成，但这是我的问题：

# app/javascript/packs/stylesheets.scss

@import 'variables';
@import 'foo';

# app/javascript/packs/_variables.scss

$bar: #fff;

# app/javascript/packs/_foo.scss

body {
  color: $bar;
}

现在当我运行 /bin/webpack-dev-server 我得到

Undefined variable: "$bar".

更重要的是

[84] ./app/javascript/packs/_foo.scss 988 bytes {2} [built] [failed] [1 error]

似乎 Rails/webpacker 编译了所有文件而不只是 stylesheets.scss

Answer 1

我终于找到了答案。

来自 Webpacker 自述文件：

The configuration for what Webpack is supposed to compile by default 
rests on the convention that every file in app/javascript/packs/*
(default) or whatever path you set for source_entry_path in the 
webpacker.yml configuration is turned into their own output files (or 
entry points, as Webpack calls it).

因此，通过将 sass 部分移动到另一个文件夹，现在只有 stylesheets.scss 得到编译。

Rails 的 Webpacker 编译 scss partials

Webpacker with Rails compiles scss partials

ruby-on-rails

sass

webpack

webpacker