gpt4 book ai didi

html - Reactjs 热加载器 css 文件

转载 作者:行者123 更新时间:2023-11-28 04:42:32 27 4
gpt4 key购买 nike

我用 react-hot-boilerplate 开始了新元素.一切正常,直到我尝试向 index.html 添加一个 css 文件。

<Link href="/style/main.css" rel="stylesheet">

热加载器不读取 css 文件。经过一些研究,我发现 server.js 中的这一行将所有请求重定向到 index.html

   app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'index.html'));
});

我把它改成了

app.get('/', function(req, res) {
res.sendFile(path.join(__dirname, 'index.html'));
});
app.get('/style/main.css', function(req, res) {
res.sendFile(path.join(__dirname, 'style/main.css'));
});

它奏效了。有没有更好的方法来做到这一点?我需要映射我 servere.js 的所有资源吗?我不想在 webpack 中使用 style-loader 或 css-loader,因为我遇到了很多错误而且我不能简单地使用 className="myCustomStyle"。

var path = require('path');
var webpack = require('webpack');
var packageJSON = require('./package.json');
const PATHS = {
build: path.join(__dirname, 'target', 'classes', 'META-INF', 'resources', 'webjars', packageJSON.name, packageJSON.version)
};
module.exports = {
devtool: 'cheap-module-source-map',
resolve: {
extensions: ['', '.js', '.jsx', '.scss'],
alias: {
config: path.join(__dirname, 'src/config/dev.js'),
},
},
entry: [
'webpack-hot-middleware/client',
'./src/index'
],
output: {
path: PATHS.build,
filename: 'app-bundle.js',
publicPath: '/static/'
},
plugins: [

new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'src')
}, {
test: /\.css$/,
loader: 'style-loader!css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]'
}]
}
};

最佳答案

加载静态文件不应在服务器端处理。因此,您不应该在服务器中插入您的样式或 js 文件,否则加载时间会更长,并且由于您使用的是 react,所以您的所有文件都是 js,所以如果您编写要在服务器上发送的资源,那么它是没有用的。所以最好的选择是在 webpack 中编写加载器。

module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
exclude: /(node_modules|bower_components)/
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.(png|jpg)$/,
loader: 'file-loader'
}
]
}

关于html - Reactjs 热加载器 css 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41138039/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com