Webpack does not load SCSS using the interactive toolbar

Question

I am trying to download a new responsive application and use the responsive tool library and webpack. I cannot get styles for interactive tools, or my own application styles.

The way I use to import scss files is to respond to the files / views / components that they work with, so they are in the same folder. Therefore, if I have a reaction component called header.js, there is header.scss in the same directory. Header.js calls import './header.scss'. In webpack, I previously used scss loading:

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

But when I turn on the response toolbar, this setting completely excludes response styles. I found this problem 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 fixes the tool-link styles that don't load, but then when I try to import my own scss files into 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).

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

Reference: (

Answer 1

include:

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

*.scss , .

Answer 2

- , :

{
            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 - , , sass toolbox-loader. , ... ugh headache