Getting CSS validation error for valid css file (0.7.0).

[limscoder]

I'm getting this error:

ERROR in ./~/css-loader!./src/main/webapp/js/modules/pages/styles/HelloWorld.css
Module build failed: Error: Please check the validity of the CSS block starting from the line #1
    at throwError (/Users/pairing/projects/alm/alm-webapp/node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:399:15)
    at checkStylesheet (/Users/pairing/projects/alm/alm-webapp/node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:1921:22)
    at Object.CSSPRules.stylesheet (/Users/pairing/projects/alm/alm-webapp/node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:365:40)
    at _getAST (/Users/pairing/projects/alm/alm-webapp/node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:409:38)
    at exports.srcToCSSP (/Users/pairing/projects/alm/alm-webapp/node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:2287:16)
    at Object.exports.srcToCSSP (/Users/pairing/projects/alm/alm-webapp/node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:2292:16)
    at Object.exports.parse (/Users/pairing/projects/alm/alm-webapp/node_modules/css-loader/node_modules/csso/lib/cssoapi.js:7:21)
    at Object.module.exports (/Users/pairing/projects/alm/alm-webapp/node_modules/css-loader/index.js:13:18)
 @ ./src/main/webapp/js/modules/pages/SynchronousCommonJsPage.jsx 11:0-38

Webpack config:

module: {
loaders: [
    {
      test: /\.jsx$/,
      loader: 'jsx-loader?insertPragma=React.DOM'
    },
    {
      test: /\.css$/,
      loader: "style-loader!css-loader"
    }
  ]
}

Require:

require("css!./styles/HelloWorld.css");

HelloWorld.css:

.hello {
  font-weight: bold;
  font-size: 24px;
  color: purple;
}

[sokra]

You apply the loader two times.

I assume you want the css as string. Try: require("!css!./styles/HelloWorld.css");

[limscoder]

Can you expand a little on that? I'm new to webpack. How is the loader being applied twice?

[sokra]

require("css!./styles/HelloWorld.css"); + module.loader expands to the request
css-loader ! style-loader ! css-loader ! ./styles/HelloWorld.css

That probably not what you want. Two requires makes sense here:

• require("./styles/HelloWorld.css"); apply the styles to the DOM
• require("!css!./styles/HelloWorld.css"); return the css as string.

The leading ! omits the module.loaders.