我正在尝试将 css 导入到我的 React 应用程序的特定组件中。
网络包配置:
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
use: 'css-loader',
}),
}
但没有应用 css。
我还在 index.html
中包含了主要的 css。这是我不能应用另一个css文件的原因吗?
<link rel="stylesheet" href="../style/style.css">
你能告诉我缺少什么吗?
最佳答案
这取决于您使用的 webpack
版本。例如,如果您使用的是 Webpack 4,那么您的 development
配置将是:
{
test: /\.s?css$/, // test for scss or css files
use: [
'style-loader', // try to use style-loader or...
{
loader: 'css-loader', // try to use css-loader
options: {
sourceMap: true, // allow source maps (allows css debugging)
modules: true, // allow css module imports
camelCase: true, // allow camel case imports
localIdentName: '[local]___[hash:base64:5]', // set imported classNames with a original className and a hashed string in the DOM, for example: "exampleClassName__2fMQK"
},
},
],
}
example.css(必须使用驼峰式而不是蛇式)
.exampleClassName {
text-align: center;
}
example.js
import React from 'react';
import { exampleClassName } from './example.css';
export default () => (
<h1 className={exampleClassName}>I am centered!</h1>
)
对于生产,您需要使用 OptimizeCSSAssetsPlugin
和 MiniCssExtractPlugin
:
minimizer: [
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
map: {
inline: false,
annotation: true
}
}
}),
],
{
plugins: [
new MiniCssExtractPlugin({
filename: `css/[name].[contenthash:8].css`,
chunkFilename: `[id].[contenthash:8].css`,
}),
]
}
当您运行 webpack
构建您的生产应用程序时,它将编译 css
并且(当 webpack 配置正确设置时)将生成一个 index.html
自动添加一个 link
到已编译的样式表。
Webpack 是一个陡峭的学习曲线,上面的例子中有很多缺失的选项,所以如果你只是想启动并运行它,那么我有一个 Webpack-React-Boilerplate有 (s)css 模块导入,并且已经为您配置了很多。我在 webpack 配置文件中包含了注释,以帮助了解每个选项的作用。
否则,如果你想学习旧版本的 webpack,那么你可以弹出 create-react-app 和逆向工程/查看他们广泛的 webpack 注释。
关于css - 将css文件导入特定组件 react 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53581651/