mini-css-extract-plugin with sass

[silasFFF]

hi! everybody

package.json

{
"name": "ls",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --watch --mode=development",
"prod": "webpack -p"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.0.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.7.0",
"node-sass": "^4.12.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.35.0",
"webpack-cli": "^3.3.5"
}
}

webpack.config.js

...
module: {
rules: [
{
test: /.(sa|sc|c)ss$/,
use:[
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV === 'development',
},
},
'css-loader',
'postcss-loader',
'sass-loader']
}
]
}
...

when i run, here is error

[./src/app.scss] 3.89 KiB {main} [built] [failed] [1 error]

ERROR in ./src/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: this[MODULE_TYPE] is not a function
at childCompiler.runAsChild (/Users/fuhangrong/workplace/test/node_modules/mini-css-extract-plugin/dist/loader.js:168:24)
at compile (/Users/fuhangrong/workplace/test/node_modules/webpack/lib/Compiler.js:306:11)

[silasFFF]

how to change the webpack.config.js for sass

[lambor]

plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],

[silasFFF]

w

plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],

maybe you were right, but not useful in my env

[alexander-akait]

It looks like you just deleted our lovely crafted issue template. It was there for good reasons. Please help us solving your issue by answering the questions asked in this template. I'm closing this. Please either update the issue with the template and reopen, or open a new issue.