Razzle: Unable to load css

[shoebmogal]

Hi,

Can you give the webpack configuration to use css-loaders?
I tried a lot of things from the internet, nothing worked.

Thanks

[rowellx68]

Are you just looking for plain CSS or SASS as well?

[jaredpalmer]

Just extract your css to build/static folder and include the link to the extracted css file the same way the js files are referenced in server.js. Remove aphrodite, etc.

[shoebmogal]

@rowellx68 yes I am trying to use extensions which use CSS and SASS.

@jaredpalmer I ll try that. But an example would be helpful. I tried to use css-loader , sass loader and give the directory in "includes" of the webpack config. Doesnt help

[rowellx68]

@shoebmogal Here's how I've done it.

I installed the following packages:

• extract-text-webpack-plugin
• css-loader
• sass-loader
• style-loader

Here's an example of my webpack.config.dev.js

https://gist.github.com/rowellx68/362ceaeedf09c83c2b9c

You should then add this line in the server.js

<link rel="stylesheet" href="${ isDeveloping ? '/build/static/main.css' : assets.main.css}">

Then in the App component

if (typeof window !== 'undefined') {
  require('../css/core.scss');
  require('../css/theme.scss');
}

We need to wrap requiring the scss files so we don't get a syntax error when we start the server.

[shoebmogal]

I ll give it a try @rowellx68 ! Thanks for all the help, will respond with my results and close thid issue.

[shoebmogal]

Hi @rowellx68 , I tried doing all of that didnt work :(
Here's the error:

/Users/../react-production-starter/node_modules/flexboxgrid/dist/flexboxgrid.css:1
(function (exports, require, module, __filename, __dirname) { .container-fluid,
^

SyntaxError: Unexpected token .
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:404:25)
at Module._extensions..js (module.js:432:10)
at Object.require.extensions.(anonymous function) as .js
at Module.load (module.js:356:32)
at Function.Module._load (module.js:313:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object. (..../react-production-starter/node_modules/react-flexbox-grid/lib/components/Grid.js:13:20)
at Module._compile (module.js:425:26)

[rowellx68]

The issue seems to stem from you requiring flexboxgrid directly inside Grid.js. After trying it out myself, what you could do is @import flexboxgrid in your own css instead.

I have this in my webpack.config

resolve: {
    modulesDirectories: [ 'node_modules' ]
}

More info about resolve.moduleDirectories --> here

Then inside my own css file I just imported it as below:

@import "~flexboxgrid/dist/flexboxgrid";

And here's the module loader for my css and scss

{
    test: /\.(s?css)$/,
    loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
}

Of course you will require the correct loaders and plugin for it to work. :smile:

[shoebmogal]

Thanks for the response @rowellx68 but its an external module that I am importing.
Infact any model that has css in it is failing with similar error.

[jaredpalmer]

@shoebmogal You'll need style-loader and css-loader to support plain css, even in external modules.

[jaredpalmer]

I am closing this issue and opening a PR for a recipes folder.

[fahamidev]

@shoebmogal do you solved your problem ?
I've same problem . And I do not know what is the solution ?

@shoebmogal @rowellx68 I opened a issue(532) about this. Thanks if you know the solution and answer that.