webpack not creating CSS file for SCSS - css

Question

This is my package.json
{
"name": "login-ts-react",
"version": "1.0.0",
"main": "webpack.config.js",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server"
},
"dependencies": {
"react": "^16.3.2",
"react-bootstrap": "^0.32.1",
"react-dom": "^16.3.2"
},
"devDependencies": {
"style-loader": "^0.21.0",
"mini-css-extract-plugin": "^0.4.0",
"#types/react": "^16.3.11",
"#types/react-bootstrap": "^0.32.8",
"#types/react-dom": "^16.0.5",
"awesome-typescript-loader": "^5.0.0-1",
"css-loader": "^0.28.11",
"html-webpack-plugin": "^3.2.0",
"import-glob-loader": "^1.1.0",
"node-sass": "^4.9.0",
"postcss-loader": "^2.1.4",
"raw-loader": "^0.5.1",
"sass-loader": "^7.0.1",
"source-map-loader": "^0.2.3",
"typescript": "^2.8.1",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3",
"webpack-env": "^0.8.0"
}
}
And this is my webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const devMode = process.env.NODE_ENV !== 'production'
module.exports = {
entry: './src/index.tsx',
mode: 'development',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader'
},
{
enforce: 'pre',
test: '/\.jsx?$/',
loader: 'source-map-loader'
},
{
test: /\.s?[ac]ss$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
}),
new MiniCssExtractPlugin({
filename: devMode ? '[name].css' : '[name].[hash].css',
chunkFilename: devMode ? '[id].css' : '[id].[hash].css'
})
],
devtool: 'source-map',
resolve: {
extensions: ['.ts', '.tsx', '.js', '.scss']
}
}
My understanding is that when I run my application and access is from the browser, I should see a bundle.js and a bundle.css.
When I run my application and see the network tab of chrome develop tools, I see bundle.js but there is no bundle.css.
I have the following SCSS file in my project
$header-img: image-url('../images/image.gif', false, false);
.bg {
background-image: $header-img;
width: 100%;
height: 100vh;
}
Why is webpack not emitting any CSS file for me?
Edit:: Based on suggestion below I added the line to my index.tsx file
require('../styles/style')
Now there are no errors. but still no *.css file in the network output.

Answer 1

Did you make sure to import your main .scss file in your ./src/index.tsx?
e.g:
require('./main.scss');

Answer 2

I kept trying multiple permutation combinations, and finally this webpack.config.js worked for me. With this webpack config, I am able to see main.css in the browser network tab.
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const devMode = process.env.NODE_ENV !== 'production'
module.exports = {
entry: './src/index.tsx',
mode: 'development',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader'
},
{
enforce: 'pre',
test: '/\.jsx?$/',
loader: 'source-map-loader'
},
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
includePaths: ["styles/"]
}
},
],
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
})
],
devtool: 'source-map',
resolve: {
extensions: ['.ts', '.tsx', '.js', '.scss']
}
}