Webpack 2 regex test failing

Question

I cant quite get my head around why my loader tests are failing.

My goal:

Test 1:

Match anything that is not either global.css or global.scss

Test 2

Only match either global.scss or global.css

Reason being is i don't want any files named global to be passed through the module options

Seems like my first test is letting global though. I can see both my regex are correctly returning true/false when using tools such as https://regex101.com/.

Could this be down to my include?

Help! :)

webpack.config.js

        {

            test: /^(?!global\.s?css$).*\.s?css$/,
            include: SRC_DIR,
            use: extractPlugin.extract({
                use: [
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            camelCase: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: { 
                            plugins: (loader) => [require('autoprefixer')()]
                        }
                    },
                    'resolve-url-loader',
                    {
                        loader: 'sass-loader',
                        options: { sourceMap: true }
                    }
                ]
            })
        },

        {

            test: /^global\.s?css$/,
            include: SRC_DIR,
            use: extractPlugin.extract({
                use: [
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: { 
                            plugins: (loader) => [require('autoprefixer')()]
                        }
                    },
                    'resolve-url-loader',
                    {
                        loader: 'sass-loader',
                        options: { sourceMap: true }
                    }
                ]
            })
        }

tests expect to match the whole file path, like 'path/to/global.scss', not only 'global.scss'. — 李文富, Jun 06 '17 at 07:51
if thats the case then why does `test: /\.(css|scss)$/` work? — Samuel, Jun 06 '17 at 08:30

score 0 · Accepted Answer · answered Jun 07 '17 at 13:41

For Test 2 try dropping the ^ from your regex. The tests are matched against the file path, not just the file name, so having it start from the beginning of the path will cause it to fail.

For Test 1 you could simplify this negative pattern by using test: \/.s?css$\ to capture all styles and then add exclude: \global.s?css$\ to prevent global from being included.

Webpack 2 regex test failing

1 Answers1