Negin Basiri Negin Basiri - 3 months ago 15
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

require('../scss/style.scss');


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

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