shakacode / sass-resources-loader

SASS resources (e.g. variables, mixins etc.) loader for Webpack. Also works with less, post-css, etc.
MIT License
982 stars 66 forks source link

Build process gets stuck when this plugin is used #121

Open joepagan opened 4 years ago

joepagan commented 4 years ago

Not sure why & how this is occurring, but, when this plugin is used in my setup my build process hangs & never completes initially.

Strangely, I can force the build process to complete when I save a "watched" scss or js file at a location not specified as one of the sass-resources-loader paths.

I have setup a custom plugin in my webpack commons config file logging the hooks afterEmit, done and failed:

compiler.hooks.done.tap('SpringPlugin', (stats) => {
          // console.log(stats);
          console.log('done');
        });
        compiler.hooks.failed.tap('SpringPlugin', (err) => {
          console.error(err);
        });
        compiler.hooks.afterEmit.tap('SpringPlugin', (compilation) => {
          console.log('afterEmit');
        });

When I save one of the files at my sass-resources-loader resources locations, i can see the logs for both the done & afterEmit hooks over and over again but the process cannot continue further after that.

Removing the sass-resources-loader plugin makes my build successful (minus the missing sass variables errors)

Here is my config for the plugin:

{
        test: /\.s?css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // only enable hot in development
              hmr: process.env.NODE_ENV !== 'production',
              // if hmr does not work, this is a forceful method.
              reloadAll: true,
            },
          },
          'css-loader',
          'postcss-loader',
          'sass-loader',
          {
            loader: 'sass-resources-loader',
            options: {
              resources: [
                `${path.resolve(__dirname, paths.src.scss)}/settings/**/*.scss`,
                `${path.resolve(__dirname, paths.src.scss)}/functions/**/*.scss`,
                `${path.resolve(__dirname, paths.src.scss)}/mixins/**/*.scss`,
              ],
            },
          },
        ],
      },

Do you have any suggestions on how this can be resolved?

Thanks for your work

Update: It looks like this is also causing issues with stylelint, where I update one of the files as a sass-resources-loader path, it detects an error with npm start, but, when I update & fix the lint error, the errors do not go away, it's like this plugin is hijacking these files from being watched.