Webpack / PostCSS - Unable to use classes from the inline styles generated by Webpack

Question

I am trying to setup Webpack(PostCSS) within a CherryPy application. Webpack appears to be generating inline styles correctly, the following is my my loader within webpack.config.js

{ test: /\.css$/, loader: "style-loader!css-loader?modules&importLoaders=1!postcss-loader" }

When I run 'webpack', it appears to correctly generate the 'test-class' styles from my stylesheets/main.css file inline within the main generated output.js file....

exports.push([module.id, ".W_8vO1mwnWhjGJpClgHqm {\n /* color: $matt; */\n color: green;\n background: red;\n}\n", ""]);

The generated output.js file is then included in a script tag within my main.html page. However, when I try to use the 'test-class' that is generated above, applying it has no effect on the element. In the webpack documentation, it mentions the following

// in your modules just require the stylesheet // This has the side effect that a <style>-tag is added to the DOM. require("./stylesheet.css");

I am unclear which module this is referring to. Any insight would be much appreciated.

edit: updating with full webpack.config.js

```

const webpack = require('webpack');
const path = require('path');
//post css
var precss       = require('precss');
var autoprefixer = require('autoprefixer');


module.exports = {

  context: __dirname + '/app',
  entry: "./test.js",
  output: {
    filename: 'almostTest.js',
    path: path.join(__dirname, './static')
},
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          presets: ['es2015']
        }
      },
      {
        test:   /\.css$/,
        loader: "style-loader!css-loader?modules&importLoaders=1!postcss-loader"
      }
    ]
  },
  postcss: [
              precss,
              autoprefixer({ browsers: ['last 2 versions']  })
            ]
}

```

Answer 1

To use the CSS in your application bundled by Webpack, you must import or require that file into your entry file.

A practice that I take is to create an index.css file which is located on the same place as your index.js entry file, and then to require it from your index.js file.

Then, inside index.css, you require all of your other apps CSS files.

Here is an example of a Webpack starter I've written importing the .scss file and the main .scss file which imports all of my other components style sheets via native imports which scss-loader treats like requires.

Otherwise, unless the styles are imported into your entry file in some way, the styles will not be accessible to your app.

EDIT:

I notice that you have modules= defined in your loader query for css-loader this will default your css to be defined as css-modules. See here in the css-loader docs for more details

Short answer: Remove the querystring from your loader definition so it looks like: css-loader?importLoaders=1 and you should be able to see your styles and access it from anywhere in your app.