CSS in the dev vs prod builds

[vangelov]

Why doesn't the dev build extract the css in a separate file but the prod does? Just curious.

[vangelov]

Well, I just found out the ExtractTextPlugin does not allow Hot Module Replacement, so this answers my question. Sorry!

[coryhouse]

Bingo. :)

[mcchrish]

If I try something like:

import 'font-awesome/css/font-awesome.css'

It works fine in dev, however, building in production results to:

ERROR in ./~/font-awesome/css/font-awesome.css
Module parse failed: /Users/../../../node_modules/font-awesome/css/font-awesome.css Unexpected character '@' (7:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (7:0)
    at Parser.pp.raise (/Users/../../../node_modules/webpack/node_modules/acorn/dist/acorn.js:920:13)
    at Parser.pp.getTokenFromCode (/Users/../../../node_modules/webpack/node_modules/acorn/dist/acorn.js:2813:8)
    at Parser.pp.readToken (/Users/../../../node_modules/webpack/node_modules/acorn/dist/acorn.js:2508:15)
    at Parser.pp.nextToken (/Users/../../../node_modules/webpack/node_modules/acorn/dist/acorn.js:2500:71)
    at Parser.parse (/Users/../../../node_modules/webpack/node_modules/acorn/dist/acorn.js:1615:10)
    at Object.parse (/Users/../../../node_modules/webpack/node_modules/acorn/dist/acorn.js:882:44)
    at Parser.parse (/Users/../../../node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/Users/../../../node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/Users/../../../node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/Users/../../../node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
 @ ./src/index.js 19:0-60
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 178 kB [rendered]
        [0] ./~/css-loader?sourceMap!./~/sass-loader?sourceMap!./src/styles/styles.sass 177 kB {0} [built]
        [1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]

I'm not sure what ExtractTextPlugin configuration that will make it work.

[coryhouse]

@mcchrish Can you please share your repo so I can try to reproduce this?

[mcchrish]

Hi @coryhouse
Here is the repo: https://github.com/gwillws/react-slingshot/tree/master. It's actually a modified fork from a react-slingshot version a couple months ago so it might not be updated.

On the other hand, using the latest slingshot with font-awesome added, I get this problem:

ERROR in ./~/font-awesome/fonts/fontawesome-webfont.woff?v=4.6.3
Module parse failed: /Users/mcchrish/test/react-slingshot/node_modules/font-awesome/fonts/fontawesome-webfont.woff?v=4.6.3 Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '' (1:4)

I can do import 'font-awesome/css/font-awesome.css'; in src/index.js or @import '~font-awesome/scss/font-awesome.scss'; via scss in styles.scss, it will result to the same error, both dev and prod.
The repo for the above is this https://github.com/mcchrish/react-slingshot/tree/font-awesome

[coryhouse]

@mcchrish - Get latest. I just committed an update that works with font awesome.

[mcchrish]

Awesome, it works now 😄
Thanks @coryhouse