Webpack not compiling scss to css

Question

I'm building an app using webpack, babel, and Sass. Everything working fine but sass file not compiling css file even though it's not throwing any errors. My Packages related to this are:

"webpack": "^3.10.0",

"css-loader": "^0.28.9",

"extract-text-webpack-plugin": "^3.0.2",

"glob-all": "^3.1.0",

"node-sass": "^4.7.2",

"purify-css": "^1.2.5",

"purifycss-webpack": "^0.7.0",

"sass-loader": "^6.0.6"

webpack.config.js:

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
const glob = require('glob-all');
var PurifyCSSPlugin= require('purifycss-webpack'); 

module.exports = {
  entry: './src/js/index.js',
  output: {
    path: __dirname,
    filename: 'dist/js/bundle.js'
  },
  watch: true,
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'stage-3'],
          }
        }
      },
      {
        test:/\.css$/,
        use: ExtractTextPlugin.extract({
          use: [ 
            {
              loader: 'css-loader',
              options: {
                url: false
              }
            }
          ]
        })
      },
      {
        test:/\.scss$/,
        use: ExtractTextPlugin.extract({
          use: [ 
            {
              loader: 'css-loader',
              options: {
                url: false
              }
            },
            'sass-loader'
          ]
        })
      }
    ]
  },

  plugins: [
    new ExtractTextPlugin({
      filename: './dist/css/styles.css'
    }),
    new PurifyCSSPlugin({
      paths: glob.sync([
        path.join(__dirname, 'dist/index.html'),
        path.join(__dirname, 'src/js/*.js')
      ])
    })
  ]
}

Files Directory: This is my project Files Directory

Can you show where you are loading the style such as css, scss, etc... — thenengah
Be aware that you have to add lang="scss" to the style tags for this to work. Not type="scss". — connexo
@sultanaslam I mean add the code that loads the style such as style tag, require, etc.. to this question so we can see how webpack finds it — thenengah

leangseu kim leangseu kim · Accepted Answer · 2018-01-22T18:39:45

test:/\.scss$/,
    use: ExtractTextPlugin.extract({
      use: [ 
        {
          loader: ['style-loader', 'css-loader', 'sass-loader']
          options: {
            url: false
          }
        },
      ]
    })

Webpack not compiling scss to css

1 Answers