Webpack not loading SCSS with react-toolbox

Question

I am trying to bootstrap a new react app and use the react-toolbox library and webpack. I am unable to get both react-toolbox's styles and my own app's styles to load.

The way I'm used to importing scss files is from the react files/views/components they go with, so they are located in the same folder. So if I have a react component file called header.js, in the same directory there is header.scss. Header.js calls import './header.scss'. In webpack, what I previously used to load scss was:

        {
            test: /\.s?css$/i,
            loader: 'style!css!sass?' +
                'includePaths[]=' + (path.resolve(__dirname, './node_modules')),
        },

But when I include react-toolbox, this setup completely excludes react-toolbox's styles. I found this issue https://github.com/react-toolbox/react-toolbox/issues/121 where mattgi recommends this webpack-config:

        {
           test    : /(\.scss|\.css)$/,
           include : path.join(__dirname, '../../', 'src'),
           loaders : [ 'style', 'css', 'sass' ]
         },
         {
           test    : /(\.scss|\.css)$/,
           include : /(node_modules)\/react-toolbox/,
           loaders : [
             require.resolve('style-loader'),
             require.resolve('css-loader') + '?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
             require.resolve('sass-loader') + '?sourceMap',
           ]
         },

This resolves the react-toolbox styles not loading, but then when I try to import my own scss files in a js file, webpack throws this error for the scss file: You may need an appropriate loader to handle this file type. (I have sass-loader installed).

In addition, if I include the scss file in the same directory with the same name (some-react-class.js and some-react-class.scss), the containing component of SomeReactClass that is importing some-react-class.js imports it as an object instead of a function which makes it seem like it is importing the scss instead of the js.

Help :(

I also have the same problem you describe after some research, i finally decided to go with https://github.com/callemall/material-ui which are also React components that implement material UI. — Aaleks, Jan 24 '16 at 00:26

Július Retzer · Answer 1 · 2016-10-25T09:17:17.400

8

Try to omit "include" property like this:

{
  test: /(\.css|\.scss)$/,
  loader: 'style!css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass?sourceMap'
}

This loader should include your *.scss and those from react-toolbox.

edited Oct 25 '16 at 09:17

answered Feb 07 '16 at 15:56

Július Retzer

1,055
1
10
25

score 3 · Answer 2 · answered Jun 25 '16 at 01:51

Seems hacky - but I did this to get it to work:

{
            test: /\.s?css$/,
            loaders: ['style', 'css', 'sass'],
             exclude: /(node_modules)\/react-toolbox/
          },
          {
            test    : /(\.scss|\.css)$/,
            include : /(node_modules)\/react-toolbox/,
            loaders : [
              require.resolve('style-loader'),
              require.resolve('css-loader') + '?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
              require.resolve('sass-loader') + '?sourceMap'
            ]
          },

Bootstrap styles and react-toolbox styles work - but I'm having a hell of a time adding a file to override the default sass variables via toolbox-loader. Not sure if the issue is related to this hackiness...ugh headache

Webpack not loading SCSS with react-toolbox

2 Answers2