neutrino sass loader not working with fork middleware

[hashtd]

please check repo for full example

https://github.com/hashtd/neutrino_sass_issue

in neutrino version 8.0.10 sass-loader in working fine , but same config giving error in 8.0.16

const path = require('path');

module.exports = {
  options: {},
  use: [
    [
      '@neutrinojs/fork', {
        configs: {
          react: {
            options: { source: 'client', output: 'build/client' },
            use: [
              [
                '@neutrinojs/react',
                {
                  style: {
                    loaders: [
                      {
                        loader: 'sass-loader',
                        useId: 'sass',
                        options: {
                          test: '/\.scss$/',
                          include: [
                            path.resolve(__dirname, 'node_modules'),
                          ]
                        }
                      }
                    ]
                  }
                }
              ],
            ]
          },
          node: {
            options: { source: 'server', output: 'build/server' },
            use: [
              [
                '@neutrinojs/node', {
                  babel: {
                    plugins: [
                      [
                        require.resolve('babel-plugin-transform-react-jsx'),
                        { pragma: 'createElement' }
                      ],
                      [
                        require.resolve('babel-plugin-jsx-pragmatic'),
                        {
                          module: 'react',
                          export: 'createElement',
                          import: 'createElement'
                        }
                      ],
                      require.resolve('babel-plugin-transform-object-rest-spread'),
                      ...(
                        process.env.NODE_ENV === 'development'
                          ? [
                            require.resolve('react-hot-loader/babel'),
                            [require.resolve('babel-plugin-transform-class-properties'), { spec: true }],
                            require.resolve('babel-plugin-transform-es2015-classes')
                          ]
                          : [
                            [require.resolve('babel-plugin-transform-class-properties'), { spec: true }]
                          ]
                      )
                    ],
                    presets: [require.resolve('babel-preset-react')],
                  }
                }
              ]
            ]
          }
        }
      }
    ]
  ]
};

but after update to 8.0.16 it is giving issue

[node] [HMR] You need to restart the application!
[react] ✔ Build completed
[react] 
[react] ERROR in ./client/app.scss
[react] Module parse failed: Unexpected character '@' (1:0)
[react] You may need an appropriate loader to handle this file type.
[react] | @mixin my-padding-mixin($some-number) {
[react] |   padding: $some-number;
[react] | }
[react]  @ ./client/MyApp.js 13:0-20
[react]  @ ./client/index.js
[react]  @ multi (webpack)-dev-server/client?http://localhost:5000 (webpack)/hot/dev-server.js ./node_modules/react-hot-loader/patch.js ./client/index

inside style i tried putting inside style test: '/\.s?css/' but from running inspect, its looking like following (style test regex not working)

{
[react]         exclude: [
[react]           /\.(module.css)$/
[react]         ],
[react]         test: '/.s?css$/',
[react]         use: [
[react]           {
[react]             loader: '/home/tushar/projects/neutrio_sass/node_modules/style-loader/index.js'
[react]           },
[react]           {
[react]             loader: '/home/tushar/projects/neutrio_sass/node_modules/css-loader/index.js',
[react]             options: {
[react]               importLoaders: 1
[react]             }
[react]           },
[react]           {
[react]             loader: 'sass-loader',
[react]             options: {
[react]               include: [
[react]                 '/home/tushar/projects/neutrio_sass/node_modules'
[react]               ],
[react]               test: '/.scss$/'
[react]             }
[react]           }
[react]         ]
[react]       },

[eliperelman]

So, I've narrowed this down to being how we serialize data across the fork middleware, as this issue only exists when trying to use it as you are across processes.

The problem is that you are using a string for the test parameter, which won't work as you have it defined, since it needs to be a regex to use a pattern. This leads to another problem, where the regex isn't transported across the process since it's an object.

667 addresses that. Once that lands, I was able to get this working with:

style: {
  test: /\.s?css$/,
  loaders: [{
    loader: 'sass-loader',
    useId: 'sass'
  }]
}