I have what should be a fairly standard Webpack rule to suppose SASS files:
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
minimize: isProduction,
sourceMap: true,
importLoaders: 1
},
},
{
loader: 'resolve-url-loader',
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: !!isProduction,
config: {
path: './postcss.config.js'
}
}
},
],
})
},
However this seems to produce an error:
Module build failed: TypeError: __webpack_require__(...) is not a function
at Object.<anonymous> (/Users/wichert/CurveTips/ws/display/node_modules/css-loader/index.js??ref--2-2!/Users/wichert/CurveTips/ws/display/node_modules/resolve-url-loader/index.js!/Users/wichert/CurveTips/ws/display/node_modules/sass-loader/lib/loader.js??ref--2-4!/Users/wichert/CurveTips/ws/display/node_modules/postcss-loader/lib/index.js??ref--2-5!/Users/wichert/CurveTips/ws/display/packages/display-site/src/assets/styles/curvetips.scss:102:50)
at __webpack_require__ (/Users/wichert/CurveTips/ws/display/node_modules/css-loader/index.js??ref--2-2!/Users/wichert/CurveTips/ws/display/node_modules/resolve-url-loader/index.js!/Users/wichert/CurveTips/ws/display/node_modules/sass-loader/lib/loader.js??ref--2-4!/Users/wichert/CurveTips/ws/display/node_modules/postcss-loader/lib/index.js??ref--2-5!/Users/wichert/CurveTips/ws/display/packages/display-site/src/assets/styles/curvetips.scss:22:30)
at module.exports.module.exports (/Users/wichert/CurveTips/ws/display/node_modules/css-loader/index.js??ref--2-2!/Users/wichert/CurveTips/ws/display/node_modules/resolve-url-loader/index.js!/Users/wichert/CurveTips/ws/display/node_modules/sass-loader/lib/loader.js??ref--2-4!/Users/wichert/CurveTips/ws/display/node_modules/postcss-loader/lib/index.js??ref--2-5!/Users/wichert/CurveTips/ws/display/packages/display-site/src/assets/styles/curvetips.scss:65:18)
at Object.<anonymous> (/Users/wichert/CurveTips/ws/display/node_modules/css-loader/index.js??ref--2-2!/Users/wichert/CurveTips/ws/display/node_modules/resolve-url-loader/index.js!/Users/wichert/CurveTips/ws/display/node_modules/sass-loader/lib/loader.js??ref--2-4!/Users/wichert/CurveTips/ws/display/node_modules/postcss-loader/lib/index.js??ref--2-5!/Users/wichert/CurveTips/ws/display/packages/display-site/src/assets/styles/curvetips.scss:68:10)
at Module._compile (module.js:660:30)
at Object.exec (/Users/wichert/CurveTips/ws/display/node_modules/webpack/lib/NormalModule.js:129:12)
at /Users/wichert/CurveTips/ws/display/node_modules/extract-text-webpack-plugin/dist/loader.js:131:26
at compile (/Users/wichert/CurveTips/ws/display/node_modules/webpack/lib/Compiler.js:300:11)
at applyPluginsAsync.err (/Users/wichert/CurveTips/ws/display/node_modules/webpack/lib/Compiler.js:510:14)
at next (/Users/wichert/CurveTips/ws/display/node_modules/tapable/lib/Tapable.js:202:11)
at Compiler.<anonymous> (/Users/wichert/CurveTips/ws/display/node_modules/extract-text-webpack-plugin/dist/loader.js:112:7)
at next (/Users/wichert/CurveTips/ws/display/node_modules/tapable/lib/Tapable.js:204:14)
at Compiler.<anonymous> (/Users/wichert/CurveTips/ws/display/node_modules/awesome-typescript-loader/src/instance.ts:442:13)
at next (/Users/wichert/CurveTips/ws/display/node_modules/tapable/lib/Tapable.js:204:14)
at Compiler.<anonymous> (/Users/wichert/CurveTips/ws/display/node_modules/webpack/lib/CachePlugin.js:78:5)
at Compiler.applyPluginsAsyncSeries (/Users/wichert/CurveTips/ws/display/node_modules/tapable/lib/Tapable.js:206:13)
at compilation.seal.err (/Users/wichert/CurveTips/ws/display/node_modules/webpack/lib/Compiler.js:507:11)
at Compilation.applyPluginsAsyncSeries (/Users/wichert/CurveTips/ws/display/node_modules/tapable/lib/Tapable.js:195:46)
at self.applyPluginsAsync.err (/Users/wichert/CurveTips/ws/display/node_modules/webpack/lib/Compilation.js:680:19)
at Compilation.applyPluginsAsyncSeries (/Users/wichert/CurveTips/ws/display/node_modules/tapable/lib/Tapable.js:195:46)
at self.applyPluginsAsync.err (/Users/wichert/CurveTips/ws/display/node_modules/webpack/lib/Compilation.js:671:11)
at next (/Users/wichert/CurveTips/ws/display/node_modules/tapable/lib/Tapable.js:202:11)
at Compilation.<anonymous> (/Users/wichert/CurveTips/ws/display/node_modules/uglifyjs-webpack-plugin/dist/index.js:244:6)
at next (/Users/wichert/CurveTips/ws/display/node_modules/tapable/lib/Tapable.js:204:14)
at Compilation.compilation.plugin (/Users/wichert/CurveTips/ws/display/node_modules/webpack/lib/BannerPlugin.js:67:5)
at next (/Users/wichert/CurveTips/ws/display/node_modules/tapable/lib/Tapable.js:204:14)
at Compilation.<anonymous> (/Users/wichert/CurveTips/ws/display/node_modules/uglifyjs-webpack-plugin/dist/index.js:244:6)
at Compilation.applyPluginsAsyncSeries (/Users/wichert/CurveTips/ws/display/node_modules/tapable/lib/Tapable.js:206:13)
at self.applyPluginsAsync.err (/Users/wichert/CurveTips/ws/display/node_modules/webpack/lib/Compilation.js:666:10)
at Compilation.applyPluginsAsyncSeries (/Users/wichert/CurveTips/ws/display/node_modules/tapable/lib/Tapable.js:195:46)
Removing the ExtractTextPlugin.extract call and using my list of loaders directly works fine, which makes me suspect there is something I am missing in ExtractTextPlugin.extract.
Update your webpack to version 3.6.0. It is works for me!
"devDependencies": {
"@biesbjerg/ngx-translate-extract": "^2.3.4",
"@types/jasmine": "2.5.36",
"@types/node": "6.0.45",
"angular2-template-loader": "0.6.0",
"awesome-typescript-loader": "3.0.4",
"copy-webpack-plugin": "^4.4.1",
"css-loader": "0.26.1",
"extract-text-webpack-plugin": "3.0.0",
"file-loader": "0.9.0",
"html-loader": "0.4.3",
"html-webpack-plugin": "2.16.1",
"node-sass": "^4.7.2",
"null-loader": "0.1.1",
"postcss-loader": "^2.1.0",
"resolve-url-loader": "^2.2.1",
"rimraf": "2.5.2",
"sass-loader": "^6.0.6",
"style-loader": "0.20.2",
"svg-sprite-loader": "^3.6.2",
"to-string-loader": "^1.1.5",
"tslint": "5.7.0",
"typescript": "2.4.2",
"url-loader": "^0.6.2",
"webpack": "3.6.0",
"webpack-dev-server": "2.9.0",
"webpack-merge": "^3.0.0"
}