Cannot use css react js server side

Question

I tried to add a lot of rules to my webpack config and nothing works..

My Github Sample. I wan't to use css files but I don't know what change to load css :

I tried something like:

{
    test: /\.css$/,
    loader: 'style!css' 
}

or:

{
    test: /\.css$/,
    use: ['css-loader', 'style-loader']
}

Do you have an idea?

EDIT :

This is all my webpack.config.js file :

const path = require("path")

const webpack = require("webpack")

module.exports = {
entry: [
    "react-hot-loader/patch",
    "webpack-dev-server/client?http://localhost:8080",
    "webpack/hot/only-dev-server",
    "./src/browser/index.js"
],
output: {
    path: path.resolve(__dirname, "build", "assets"),
    filename: "app.min.js",
    publicPath: "/assets/"
},
module: {
    loaders: [
        {
            test: /\.js$/,
            loader: "babel-loader"
        },
        {
            test: /\.(jpe?g|png|gif|svg|ico)$/i,
            loaders: [
                'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
                'image-webpack-loader'
            ]
        },
        {
            test: /\.css$/,
            loader: "style-loader!css-loader"
        }
    ]
}

,
plugins: [
    new webpack.HotModuleReplacementPlugin()
],
resolve: {
    alias: {
        component: path.resolve(__dirname, "src", "component"),
        actions: path.resolve(__dirname, "src", "actions"),
        reducers: path.resolve(__dirname, "src", "reducers"),
        store: path.resolve(__dirname, "src", "store")
    }
},
devServer: {
    host: "localhost",
    port: 8080,
    hot: true,
    proxy: {
        "**": "http://localhost:3000"
    }
}

};

Ok, so I don't know why but it can build but, when I start, I have this error :

/Users/psyycker/Documents/ReactJS/IntranetReactJS/build/server.js:68034 return window && document && document.all && !window.atob; ^

ReferenceError: window is not defined at >/Users/psyycker/Documents/ReactJS/IntranetReactJS/build/server.js:68034:2 at /Users/psyycker/Documents/ReactJS/IntranetReactJS/build/server.js:68023:46 at module.exports (/Users/psyycker/Documents/ReactJS/IntranetReactJS/build/server.js:68078:46) at Object. (/Users/psyycker/Documents/ReactJS/IntranetReactJS/build/server.js:67899:38) at webpack_require (/Users/psyycker/Documents/ReactJS/IntranetReactJS/build/server.js:20:30) at Object. (/Users/psyycker/Documents/ReactJS/IntranetReactJS/build/server.js:67852:69) at webpack_require (/Users/psyycker/Documents/ReactJS/IntranetReactJS/build/server.js:20:30) at Object. (/Users/psyycker/Documents/ReactJS/IntranetReactJS/build/server.js:56338:82) at webpack_require (/Users/psyycker/Documents/ReactJS/IntranetReactJS/build/server.js:20:30) at Object. (/Users/psyycker/Documents/ReactJS/IntranetReactJS/build/server.js:56216:93) [nodemon] app crashed - waiting for file changes before starting...

I updated the github repository so you can try the repo directly on your machine

Have you imported the css file in the react root file (App.jsx)? — U Rogel
– U Rogel, Commented Nov 19, 2017 at 8:59
Oh yes indeed, this code is a working one, the question is :where do I exactly put my loader in this code ? — Psyycker
– Psyycker, Commented Nov 19, 2017 at 10:56

U Rogel · Accepted Answer · 2017-11-19 11:12:57Z

1

I can't see it in the github repo, but if you did use it, then in your webpack.config.js add this:

module: {
    loaders: [
        ....,
        {
            test: /\.css$/,
            loader: "style-loader!css-loader"
        }
    ]
}

And also since I can't find a style/css loader packages in package.json run npm install --save-dev style-loader css-loader

answered Nov 19, 2017 at 11:12

U Rogel

1,95117 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Psyycker Over a year ago

I did exactly this and I still have Can't resolve 'style.css'.... See the EDIT of my post to see how is my config file

U Rogel Over a year ago

First if you updated your project it is not appearing on github so I can't say much about your new code. And the error you mentioned in your edited PO is because you are importing from a bad path this var import configureStore from "store/configureStore", should be import configureStore from "../store/configureStore"

Psyycker Over a year ago

It's an alias : store: path.resolve(__dirname, "src", "store") And yhea this project is not updated, this error is on my local repo

Psyycker Over a year ago

I've updated my repo, then you can test on your machine

Collectives™ on Stack Overflow

Cannot use css react js server side

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related