webpack 无法构建 sass-loader：“”之后的 CSS 无效：预期 1 个选择器或 at-rule，是“var content = requi”答案

【问题标题】：webpack failing to build sass-loader: Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi"webpack 无法构建 sass-loader：“”之后的 CSS 无效：预期 1 个选择器或 at-rule，是“var content = requi”
【发布时间】：2019-11-26 04:24:42
【问题描述】：

使用：babel、webpack、angular 7

这是我第一次编写 webpack.config 文件，我在构建 sass-loader/我的 scss 文件时遇到了一些问题。

我尝试将 sass-loader 降级为“sass-loader”：“~6.0.7”，并添加

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

到 angular.json 文件，但它没有任何区别。

这是我的 webpack.config 文件的副本：

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(),
  ]
};

我不断收到以下错误：

未捕获的错误：模块构建失败（来自 ./node_modules/sass-loader/lib/loader.js):

// 常规风格吐司 ^ “”之后的无效 CSS：预期 1 个选择器或规则，是“var content = requi”

./src/app/components/shared-features/geo-charts/geo-charts.component.scss 模块构建失败（来自 ./node_modules/sass-loader/lib/loader.js）：

//#chartdiv { ^ “”之后的无效 CSS：预期 1 个选择器或规则，是“var content = requi”

我是否在配置中遗漏了什么/写错了什么？

【问题讨论】：

标签： webpack angular7 babeljs

【解决方案1】：

问题是由于缩进

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

      ]
    },

indentedSyntax:false 是救星。

【讨论】：