Negin Basiri Negin Basiri - 1 year ago 102
Sass (Sass) Question

Sass stylesheet is not being loaded - webpack

I have a single style.scss files which imported other stylesheets. What I want to achieve is

  1. Load the style on my page

  2. Watch any changes on the all stylesheet files for changes and reflect it live on the browser (without clicking on refresh button).

I am using webpack-dev-server to serve files. However I cannot see the style applied to my page.

Here is my loader in webpack config:

modules: {
loaders: [
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!sass-loader")
plugin: [
new ExtractTextPlugin('styles.css')

and in my entry point file which is main.js I have


When I run webpack the style.css is created correctly. However when I run the app using webpack-dev-server I cannot see style applied.

You can find the code on Github

Can someone please help to find what's the issue?

Answer Source

I resolved it by removing "ExtractTextPlugin" from plugins and changing loader

    test: /\.scss$/,
    loaders: ['style', 'css', 'sass']

This works for development. For prod I still need ExtractTextPlugin to create styles.css

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download