webpack-import-glob-loader not working with `.scss` files in Rails 6 + Webpacker project

Viewed 68

I'm in the process of migrating at Rails 6 project from sprockets to webpacker. So far, so good, up until this point.

In the original original application.scss of the project, there are statements that import stylesheets that are within subdirectories. The folder structure looks like this:

app/assets/stylesheets
- components/
- helpers/
- layout/
- mixins/
- settings/
- variables/

Accordingly, the application.scss has the following statements:

@import "variables/*";
@import "mixins/*";
@import "settings/*";
@import "layout/*";
@import "components/*";
@import "helpers/*";

I've followed the installation instructions of webpack-import-glob-loader. Because I'm using webpacker, there is no webpack.config.js. Instead, it's in config/webpack/environment.js. I added the recommended configuration to environment.js like this:

const { environment } = require('@rails/webpacker')
environment.config = environment.config.merge({
  module: {
    rules: [
      {
          test: /\.js$/,
          use: 'webpack-import-glob-loader'
      },
      {
          test: /\.scss$/,
          use: 'webpack-import-glob-loader'
      },
    ]
  }
});

module.exports = environment;

I also configured webpacker to use app/assets as the source_path, so it should be able to see all the folders within app/assets.

To be sure this works, I commented out all the import statements in application.scss and added this:

@import "stylesheets/variables/colors.scss";

This built fine when I ran ./bin/webpack.

Now when trying out webpack-import-glob-loader, I tried this one statement:

@import "stylesheets/variables/**/*.scss";

This returns the following error when I run ./bin/webpack:

ERROR in ./app/assets/packs/styles/application.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
9 │ @import "stylesheets/variables/**/*.scss";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Any suggestions?

0 Answers
Related