ERROR with compiling sass file

I’ve migrated webpack from 4 to 5. Running into issues with sass loader. How to approach this problem?

module: {
            rules: [
                {
                    test: /\.worker\.ts$/,
                    use: ['workerize-loader'],
                    exclude: path.resolve(__dirname, 'node_modules'),
                },
                {
                    test: /\.(ts|js)x?$/,
                    exclude: /node_modules/,
                    use: ['awesome-typescript-loader'],
                    enforce:'pre'
                },
                {
                    test: /\.html$/,
                    use: ['html-loader']
                },
                {
                    test: /\.s[ac]ss$/i,
                    use: [
                        "style-loader",
                        "css-loader",
                        {
                            loader: "sass-loader",
                            options: {
                                // Prefer `dart-sass`
                                implementation: require("sass"),
                                sassOptions: {
                                    fiber: false,
                                },
                            },
                        },
                    ],
                },
                {
                    test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                    use: ['url-loader']
                }
            ],
        },
        resolve: {
            'extensions': ['.js', '.jsx', '.ts', '.tsx']
        },

ERROR in ./assets/scss/index/index_PA.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js??ruleSet[1].rules[3].use[2]!./node_modules/file-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1]!./assets/scss/index/index_PA.scss) Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import ‘…/vendors/bootstrap-4.3.1/css/bootstrap’; ^ Expected “{”. ╷ 1 │ export default webpack_public_path + “static/media/index_PA.c1419108.scss”; │ ^ ╵ stdin 1:79 root stylesheet in /Users/spa/assets/scss/index/index_PA.scss (line 1, column 79)

[alexander-akait]

@priya454

Here template https://github.com/webpack-contrib/sass-loader/issues/new?assignees=&labels=&template=BUG.md

But can you explain how you figured out that “file-loader” is missing

Based on error message, look at file-loader/css-loader/etc works, they should have the right order, i.e. firstly file-loader, then css-loader, then sass-loader and etc

Note: file-loader is deprecated (they still will work for webpack v5), but I strongly recommend migrate on https://webpack.js.org/guides/asset-modules/ (better support, more abilities, faster, no extra deps).

[priya454]

@alexander-akait I added “file-loader” before style-loader and css-loader. It fixed the issue. But can you explain how you figured out that “file-loader” is missing

{
                    test: /\.s[ac]ss$/i,
                    use: [
                         **"file-loader"**,
                        "style-loader",
                        "css-loader",
                        {
                            loader: "sass-loader",
                            options: {
                                // Prefer `dart-sass`
                                implementation: require("sass"),
                                sassOptions: {
                                    fiber: false,
                                },
                            },
                        },
                    ],
                },