webpack failing to build sass-loader: Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi"

Question

using: babel, webpack, angular 7

This is my first time writing a webpack.config file and I'm having a few issues building the sass-loader/ my scss files.

I have tried down grading sass-loader to "sass-loader": "~6.0.7", and adding

"stylePreprocessorOptions": {
    "includePaths": [
        "src/scss"
     ]
  },

to angular.json file but it didnt make a difference.

Here is a copy of my webpack.config file:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Dotenv = require('dotenv-webpack');
// const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  entry: { 
        'polyfills': '@babel/polyfill',
        'app': './src/main.ts'
    },
  resolve: {
        extensions: ['.ts', '.js', '.scss', '.json', '.html']
    },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer: {
      contentBase: './dist'
  },
  module: {
            rules: [
                {
                    test: /\.m?js$/,
                    exclude: /(node_modules)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                },
                {
                    test: /\.(scss|css)$/,
                    use: ["raw-loader", "sass-loader"]
                 },
                {
                    test: /\.(s?css)$/,
                    use: [
                      "style-loader" ,
                      "css-loader" ,
                      "sass-loader",
                      { 
                        loader: "to-string-loader"  
                      }
                    ]

                },
                { 
                    test: /\.(html)$/, 
                    loader: 'raw-loader',
                },
                {
                    test: /\.tsx?$/,
                    loaders: [
                      {
                        loader: 'awesome-typescript-loader',
                        options: { configFileName: 'tsconfig.json' }
                      } , 'angular2-template-loader'
                    ]
                }
            ]
        },
  plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: './src/index.html',
    }),
    new Dotenv(),
  ]
};

I keep getting the following errors:

Uncaught Error: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

// regular style toast ^ Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi"

./src/app/components/shared-features/geo-charts/geo-charts.component.scss Module build failed (from ./node_modules/sass-loader/lib/loader.js):

//#chartdiv { ^ Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi"

Have I missed something/wrote something wrong in the config?

Answer 1

The problem is due to indentation

    {
      test: /\.scss$/,
      use: [
        MiniCssExtractPlugin.loader,
        { loader: 'css-loader', options: { sourceMap: true, importLoaders: 1 } },
        { loader: 'sass-loader', options: { indentedSyntax: false } },

      ]
    },

indentedSyntax:false is the saviour.