【问题标题】:Cannot use css react js server side无法使用css react js服务器端
【发布时间】:2018-05-02 16:09:06
【问题描述】:

我尝试在我的 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 在 /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 存储库,因此您可以直接在您的机器上尝试该存储库

【问题讨论】:

  • react根文件(App.jsx)中的css文件导入了吗?
  • 是:从“style.css”导入样式
  • 我在你的代码中找不到,在哪个位置?
  • 哦,是的,确实,这段代码是有效的,问题是:我在哪里把我的加载器放在这段代码中?

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


【解决方案1】:

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

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

而且由于我在package.json 中找不到样式/css 加载程序包,所以运行npm install --save-dev style-loader css-loader

【讨论】:

  • 我确实这样做了,但我仍然无法解析 'style.css'.... 请参阅我的帖子的编辑以了解我的配置文件如何
  • 首先,如果你更新了你的项目,它不会出现在 github 上,所以我不能对你的新代码说太多。您在编辑的 PO 中提到的错误是因为您从错误的路径导入这个 var import configureStore from "store/configureStore",应该是 import configureStore from "../store/configureStore"
  • 这是一个别名:store: path.resolve(__dirname, "src", "store") 而且这个项目没有更新,这个错误在我的本地仓库中
  • 我已经更新了我的仓库,然后你可以在你的机器上测试
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-08-26
  • 2015-11-02
  • 2021-10-30
  • 2017-06-15
  • 2016-04-09
  • 1970-01-01
相关资源
最近更新 更多