sass-loader doesn't generate css - css

Question

I tried to update this webpack config to generate css from scss. I added styles.scss into src folder with one css rule:
body{
font-size: 38px;
}
If I run yarn build or yarn dev, webpack doesn't generate any css files and I don't get any error.
webpack.config.js
/* global __dirname, require, module*/
const webpack = require('webpack');
const path = require('path');
const env = require('yargs').argv.env; // use --env with webpack 2
const pkg = require('./package.json');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
let libraryName = pkg.name;
let outputFile, mode;
if (env === 'build') {
mode = 'production';
outputFile = libraryName + '.min.js';
} else {
mode = 'development';
outputFile = libraryName + '.js';
}
const config = {
mode: mode,
entry: __dirname + '/src/index.js',
devtool: 'inline-source-map',
output: {
path: __dirname + '/lib',
filename: outputFile,
library: libraryName,
libraryTarget: 'umd',
umdNamedDefine: true,
globalObject: "typeof self !== 'undefined' ? self : this"
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
loader: 'babel-loader',
exclude: /(node_modules|bower_components)/
},
{
test: /(\.jsx|\.js)$/,
loader: 'eslint-loader',
exclude: /node_modules/
},
{
test: /\.scss$/,
use: [
// fallback to style-loader in development
process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
}
]
},
resolve: {
modules: [path.resolve('./node_modules'), path.resolve('./src')],
extensions: ['.json', '.js', '.scss']
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};
module.exports = config;
package.json
{
"name": "webpack-library-starter",
"version": "1.0.2",
"description": "Produce universal library with webpack and es6",
"main": "lib/webpack-library-starter.js",
"scripts": {
"build": "webpack --env dev && webpack --env build && npm run test",
"dev": "webpack --progress --colors --watch --env dev",
"test": "mocha --require babel-register --colors ./test/*.spec.js",
"test:watch": "mocha --require babel-register --colors -w ./test/*.spec.js",
"test:cover": "cross-env NODE_ENV=test nyc mocha --require babel-register --colors test/*.js",
"repl": "node -i -e \"$(< ./lib/webpack-library-starter.js)\""
},
"repository": {
"type": "git",
"url": "https://github.com/krasimir/webpack-library-starter.git"
},
"keywords": [
"webpack",
"es6",
"starter",
"library",
"universal",
"umd",
"commonjs"
],
"author": "Krasimir Tsonev",
"license": "MIT",
"bugs": {
"url": "https://github.com/krasimir/webpack-library-starter/issues"
},
"homepage": "https://github.com/krasimir/webpack-library-starter",
"devDependencies": {
"#babel/cli": "^7.0.0-beta.51",
"#babel/core": "^7.0.0-beta.51",
"#babel/preset-env": "^7.0.0-beta.51",
"babel-eslint": "^8.0.3",
"babel-loader": "^8.0.0-beta.4",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-istanbul": "^5.1.0",
"babel-preset-env": "^7.0.0-beta.3",
"babel-register": "^7.0.0-beta.3",
"chai": "^4.1.2",
"cross-env": "^5.2.0",
"eslint": "^5.0.1",
"eslint-loader": "^2.0.0",
"jsdom": "11.11.0",
"jsdom-global": "3.0.2",
"mocha": "^4.0.1",
"nyc": "^13.1.0",
"uglifyjs-webpack-plugin": "^1.2.7",
"webpack": "^4.12.2",
"webpack-cli": "^3.0.8",
"yargs": "^10.0.3"
},
"nyc": {
"sourceMap": false,
"instrument": false
},
"dependencies": {
"css-loader": "^2.1.1",
"mini-css-extract-plugin": "^0.7.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1"
}
}

Answer 1

Check, if you imported scss file in entry js file, for example index.js.