Webpack - include automatically a config scss file in all the other scss module

2
votes

I have project structure regarding style files like this one:

client/
config-style.scss
------components/
------style.scss
-----------------my_component/
-----------------style.scss

in all the style.scss files there are the local style for a particular component.

In the config-style.scss there are variables used by all the others files e.g.:

$font-size-large: 30px

Actually I import config-style.scss file in each style.scss file using:

@import "../style.scss";

I'm also using webpack to produce a main.scss file with the ExtractTextPlugin

    {
            test: /\.(css|scss)$/,
            loader: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use:  [
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            modules: true,
                            importLoaders: 1,
                            localIdentName: '[name]-[local]___[hash:base64:5]'
                        }
                    },
                    { loader: 'sass-loader', options: { sourceMap: true } }
                ]
            })
        }

Is there a way to tell webpack to include automatically the config-style.scss in all the other .scss files ?

2
webpackwebpack-2webpack-style-loadersass-loader

2 Answers

3
votes

Yes, there is a way to inject common scss files. You could specify your imports under options. includePaths can also be provided. Here is the syntax. Let me know if it works for you :)

{
    loader: "sass-loader",
    options: {
        data: '@import "config-styles";'
        includePaths: includePaths
    }
}
0
votes

This has changed in the latest version of sass-loader:

{
  loader: 'sass-loader',
  options: {
    additionalData:
      '@import "config-styles";',
  },
}