How to combine `css-modules` with regular` sass`, preferably in `webpack`

Question

TL; DR: How to combine css-moduleswith the usual sass, preferably in webpack.

Setup:

I am working on the process of creating a style for an e-commerce website. Site styles are currently executed in sass along with js using the browser gulp process > .

I recently added a one-page application that is built using responsive with webpack and babel . Inside this application, I use the css-modules provided by webpack to cover the class names for each responsive .

Problem:

I would like to include styles from webpack css-modulesin the assembly with the basic set of styles for the site. To do this, I considered creating a webpack configuration to create styles for the entire site. The problem is how to get the styles that are currently created using the single page web page configuration, and embed only a piece of style in the global webpack configuration, which handles the styles for the entire site. I should mention that I would like to keep the two configurations as separate as possible

Questions:

• Is there a way to have untied webpack assemblies where you can still use chunks from another?

• If so, how can I do this so that the installation css-moduleremains in the configuration of one page, and the part, extract-text-webpacktogether with the assembly assembly of sass, goes into the global configuration?

• , , sass css-modules .

.

@Alexandr Subbotin, -, - . - , , .

var ExtractTextPlugin = require('extract-text-webpack-plugin');

const JSDIR = './build/js/';
const STYLES = './build/css/bundle.css';

module.exports = {
    entry : {
        'styles'   : './src/styles.scss',
        'app'      : './src/index.js',
        // a javascript file that includes the root of the single page app.
        'single-page' : './src/single-page/styles-entry.js', 
    },
    output : {
        path     : JSDIR,
        filename : '[name].js', // normally compiles my 
        publicPath: 'http://localhost:8080/',
    },
    module: {
        loaders: [
          {
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader : 'babel-loader',
            query : {
                presets: [
                    'react','es2015','stage-0',
                ]
            },
          },
          {
            test : /\.scss$/,
            loader: ExtractTextPlugin.extract('style?sourceMap', 'css?-url&sourceMap!sass?sourceMap'),
            exclude : /\/single-page\//,
          },
          {
            test : /\.scss$/,
            loader: ExtractTextPlugin.extract(
              'style?sourceMap',
              'css?-url&modules&importLoaders=1&localIdentName=SinglePage__[name]__[local]!sass?sourceMap'
            ),
            include : /\/single-page\//,
          }
        ]
    },
    plugins : [
      new ExtractTextPlugin(STYLES, {
          allChunks : true,
      }),
    ],
    resolve : {
        alias: {
            "eventEmitter/EventEmitter": "wolfy87-eventemitter",
      },
      extensions: ['', '.js','.jsx'],
    },
}

Answer 1

, css- sass .

exclude include . single-page, webpack :

module: {
  entry: {
    // it is your global sass styles
    application_css: './css/application.scss',
    // it is main file of your SPA bundle. Somewhere inside you will use require('./styles.scss') that should be processed by css-modules
    spa_index: './single-page/index.js'
  },
  loaders: [
    ...,
    {
      // This loader will build all your sass that are not in `single-page` directory
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract('style', 'css!sass'),
      exclude: /\/single-page\//
    },
    {
      // This loader will handle all your css module in `single-page` directory
      test: /\.scss$/,
      loader: 'style!css?modules!sass',
      include: /\/single-page\//
    },
  ],
  ...
}

, css single-page/ css-, .

EDIT:

API ExtractTextPlugin,

ExtractTextPlugin , [name], [id] [contenthash].

css (styles single-page), ./build/css/bundle.css. ./build/css/[name].css, css: styles.css css single-page.css SPA.