无法使用css react js服务器端

时间:2017-11-19 08:45:41

标签: css reactjs webpack webpack-style-loader css-loader

我尝试在我的webpack配置中添加了很多规则,但没有任何作用。

My Github Sample。我不想使用css文件,但我不知道加载css会有什么变化:

我尝试过类似的事情:

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

或:

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

你有什么想法吗?

编辑:

这是我的webpack.config.js文件:

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"
    }
}

};

好的,所以我不知道为什么但它可以构建但是,当我开始时,我有这个错误:

  

/Users/psyycker/Documents/ReactJS/IntranetReactJS/build/server.js:68034           返回窗口&&文件&& document.all&& !window.atob;           ^

     

ReferenceError:未定义窗口       在> /Users/psyycker/Documents/ReactJS/IntranetReactJS/build/server.js:68034:2       at /Users/psyycker/Documents/ReactJS/IntranetReactJS/build/server.js:68023:46       在module.exports(/Users/psyycker/Documents/ReactJS/IntranetReactJS/build/server.js:68078:46)       在对象。 (/Users/psyycker/Documents/ReactJS/IntranetReactJS/build/server.js:67899:38)       在 webpack_require (/Users/psyycker/Documents/ReactJS/IntranetReactJS/build/server.js:20:30)       在对象。 (/Users/psyycker/Documents/ReactJS/IntranetReactJS/build/server.js:67852:69)       在 webpack_require (/Users/psyycker/Documents/ReactJS/IntranetReactJS/build/server.js:20:30)       在对象。 (/Users/psyycker/Documents/ReactJS/IntranetReactJS/build/server.js:56338:82)       在 webpack_require (/Users/psyycker/Documents/ReactJS/IntranetReactJS/build/server.js:20:30)       在对象。 (/Users/psyycker/Documents/ReactJS/IntranetReactJS/build/server.js:56216:93)   [nodemon]应用程序崩溃 - 在开始之前等待文件更改...

我更新了github存储库,因此您可以直接在您的计算机上试用repo

1 个答案:

答案 0 :(得分:1)

我在github repo中看不到它,但是如果你确实使用过它,那么在你的webpack.config.js添加这个:

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

此外,由于我在package.json运行npm install --save-dev style-loader css-loader

中找不到样式/ css加载程序包