webpack not creating CSS file for SCSS

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.

try adding backgroundcolor to body, just to check if styles are genearated — Gautam Naik
– Gautam Naik, Commented Apr 29, 2018 at 18:28
Add .scss in resolve: { extensions: ['.ts', '.tsx', '.js'] } — Nicolas S.
– Nicolas S., Commented Apr 29, 2018 at 18:39
I added the '.scss' to the resolve array but it didn't solve the problem. — Knows Not Much
– Knows Not Much, Commented Apr 29, 2018 at 18:42
I have checked in a small POC which shows this problem here github.com/abhsrivastava/login-ts-react — Knows Not Much
– Knows Not Much, Commented Apr 29, 2018 at 18:43

Nicolas S. · Accepted Answer · 2018-04-29 18:31:08Z

4

Did you make sure to import your main .scss file in your ./src/index.tsx?

e.g:

require('./main.scss');

answered Apr 29, 2018 at 18:31

Nicolas S.

3291 gold badge3 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Knows Not Much Over a year ago

That line was missing. I added it and now the error message changed. I updated my question. Thanks because now I know its trying to at least process my style.scss file

Knows Not Much · Accepted Answer · 2018-04-29 23:55:15Z

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']
  }
}

Could you summarize the changes you made that resolved this issue?

Collectives™ on Stack Overflow

webpack not creating CSS file for SCSS

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related