'Invalid CSS'-errors on compilation when swapping `sass-loader` for `fast-sass-loader`

[DJ-Icebear]

Hello! I'm trying to swap out sass-loader for fast-sass-loader, however I get this error message trying to doing so:

ERROR in ./assets/stylesheets/importer.scss
    Module build failed: ModuleBuildError: Module build failed: Error: Invalid CSS after "}": expected 1 selector or at-rule, was '@charset "UTF-8";'
        at options.error (C:\Projects\LerniaSE\src\LerniaSE.EpiserverCMS\node_modules\node-sass\lib\index.js:291:26)
        at runLoaders (C:\Projects\LerniaSE\src\LerniaSE.EpiserverCMS\node_modules\webpack\lib\NormalModule.js:244:20)
        at C:\Projects\LerniaSE\src\LerniaSE.EpiserverCMS\node_modules\loader-runner\lib\LoaderRunner.js:364:11
        at C:\Projects\LerniaSE\src\LerniaSE.EpiserverCMS\node_modules\loader-runner\lib\LoaderRunner.js:230:18
        at context.callback (C:\Projects\LerniaSE\src\LerniaSE.EpiserverCMS\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
        at co.then.err (C:\Projects\LerniaSE\src\LerniaSE.EpiserverCMS\node_modules\fast-sass-loader\lib\index.js:301:5)
        at <anonymous>
     @ ./assets/scripts/app.ts 3:0-30
     @ multi babel-polyfill ./assets/scripts/app.ts

My webpack.config.js looks like this:

const webpack = require('webpack');
const WebpackCleanupPlugin = require('webpack-cleanup-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const SriPlugin = require('webpack-subresource-integrity');
require("babel-polyfill");

function getConfiguration(environment, chunkName, entry, dest, plugins = []) {
    return {
        entry: {
            [chunkName]: ['babel-polyfill', entry]
        },
        output: {
            filename: '[name].[hash].js',
            path: path.resolve(__dirname, dest),
            publicPath: '/',
            crossOriginLoading: 'anonymous'
        },
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        {
                            loader: 'css-loader',
                            options: { sourceMap: !environment.isProduction }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: function() {
                                    return [
                                        require('postcss-flexbugs-fixes'),
                                        require('autoprefixer'),
                                        require('cssnano')({ zindex: false })
                                    ];
                                }
                            }
                        },
                        {
                            loader: "fast-sass-loader",
                            options: { sourceMap: !environment.isProduction }
                        }
                    ]
                },
                // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
                { test: /\.tsx?$/, loader: "ts-loader" },
                {
                    test: /\.(jpe?g|png|gif|svg)$/i,
                    exclude: /fonts/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                hash: 'sha512',
                                digest: 'hex',
                                name: '[name].[hash].[ext]',
                                outputPath: 'images/',
                                publicPath: 'images/'
                            }
                        },
                        {
                            loader: 'image-webpack-loader',
                            options: {
                                bypassOnDebug: true
                            }
                        }
                    ]
                }, {
                    test: /\.(eot|ttf|woff|woff2|otf|svg)$/,
                    exclude: /images/,
                    use: [{
                        loader: 'file-loader',
                        options: {
                            name: '[name].[hash].[ext]',
                            outputPath: 'fonts/',
                            publicPath: 'fonts/'
                        }
                    }]
                }
            ]
        },
        devtool: 'source-map',
        resolve: {
            extensions: ['.webpack.js', '.web.js', '.js', '.scss', '.ts'],
            modules: [
                path.resolve('./assets'),
                path.resolve('./node_modules')
            ],
            alias: {
                vue: 'vue/dist/vue.common.js'
            }
        },
        plugins: [
            new WebpackCleanupPlugin({
                exclude: ['fonts/**/*', 'images/**/*']
            }),
            new MiniCssExtractPlugin({
                filename: "[name].[hash].css"
            }),
            ...plugins
        ]
    };
}

module.exports = function (env) {
    const environment = {
        isProduction: env && env.production,
        isDevelopment: !env || !env.production
    };

    const nodeEnv = environment.isProduction ? JSON.stringify('production') : JSON.stringify('development');

    return [
        getConfiguration(environment, 'main', './assets/scripts/app.ts', 'dist', [
            new SriPlugin({
                hashFuncNames: ['sha256'],
                enabled: environment.isProduction
            }),
            new HtmlWebpackPlugin({
                inject: false,
                template: 'Views/Shared/StaticAssets/ScriptsTemplate.cshtml',
                filename: '../Views/Shared/StaticAssets/Scripts.cshtml'
            }),
            new HtmlWebpackPlugin({
                inject: false,
                template: 'Views/Shared/StaticAssets/StylesTemplate.cshtml',
                filename: '../Views/Shared/StaticAssets/Styles.cshtml'
            }),
            new BrowserSyncPlugin({
                // browse to https://localhost:3000/ during development
                proxy: {
                    target: 'https://lerniase.local'
                },
                files: 'Views/**/*.cshtml'
            }),
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery"
            }),
            new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV: nodeEnv
                }
            })
        ]),
        getConfiguration(environment, 'editor', './assets/scripts/editor.ts', 'Static/css/editor')
    ];
};

[yibn2008]

@DJ-Icebear I think it's an another BOM issue, see https://github.com/yibn2008/fast-sass-loader/issues/33#issuecomment-381176888

[yibn2008]

check out fast-sass-loader@1.4.2, it will auto remove BOM header if sass file encoding is utf8 with BOM.

[DJ-Icebear]

I can verify that the BOM header was the issue. I reencoded all of my scss files to UTF without signature and it works =). TY!

[summanerd]

I have 1.4.5 on Windows and I'm getting a similar issue. I cannot change the encoding of my files as my team is large and it's bound to be a reoccurring issue. Module build failed: ModuleBuildError: Module build failed: Error: Invalid CSS after "$body-bg": expected 1 selector or at-rule, was ": $color123 !defaul"

the line is $body-bg: $color123 !default;

works fine with sass-loader, I'm looking to use this for dedupe purposes.

[summanerd]

Apologies i'm also seeing import issues, so there a bigger issue. I was hoping to switch from sass-loader to this, but looks like it will require some work. Just not clear what, so I'll just revert due to time restraints. Thanks