webpack - 指定したディレクトリにsassファイルをコンパイルするようにwebpackを設定する方法

Question

scss ファイルを /dist/css フォルダーにコンパイルするように webpack を構成しようとしています。css を js にバンドルしたくありません。しかし、私はエラーが発生しています。

私は何を間違っていますか？

webpack と npm rebuild node-sass を再インストールしようとしましたが、うまくいきません。

私の実際のwebpack.config.js:

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: {
        main: './src/main.ts',
        inject: './src/inject.ts',
        popup: ['./src/popup.ts', './styles/popup.scss'],
        content: './src/content.ts'
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'sass-loader',
                    'css-loader'
                ]
            }
        ]
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "./dist/css/[name].css",
            chunkFilename: "./dist/css/[id].css"
        })
    ]
};

エラー出力:

ERROR in ./styles/popup.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

html,body {
^
      Invalid CSS after "e": expected 1 selector or at-rule, was "exports = module.ex"
      in project\styles\popup.scss (line 1, column 1)
    at runLoaders (project\node_modules\webpack\lib\NormalModule.js:301:20)
    at project\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at project\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (project\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at Object.render [as callback] (project\node_modules\sass-loader\lib\loader.js:52:13)
    at Object.done [as callback] (project\node_modules\neo-async\async.js:8077:18)
    at options.error (project\node_modules\node-sass\lib\index.js:294:32)
 @ multi ./src/popup.ts ./styles/popup.scss popup[1]
Child mini-css-extract-plugin node_modules/sass-loader/lib/loader.js!node_modules/css-loader/dist/cjs.js!styles/popup.scss:
    Entrypoint mini-css-extract-plugin = *
    [0] ./node_modules/sass-loader/lib/loader.js!./node_modules/css-loader/dist/cjs.js!./styles/popup.scss 290 bytes {0} [built] [failed] [1 error]

    ERROR in ./styles/popup.scss (./node_modules/sass-loader/lib/loader.js!./node_modules/css-loader/dist/cjs.js!./styles/popup.scss)
    Module build failed (from ./node_modules/sass-loader/lib/loader.js):

    html,body {
    ^
          Invalid CSS after "e": expected 1 selector or at-rule, was "exports = module.ex"
          in project\styles\popup.scss (line 1, column 1)