[英]Importing css file to specific component react app
我正在尝试将CSS导入到我的React App的特定组件中。
webpack配置:
{
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
会自动向已编译的样式表添加link
。
Webpack是一个陡峭的学习曲线,上面的示例中有很多遗漏的选项,因此,如果您只是想使其启动并运行,那么我有一个Webpack-React-Boilerplate ,其中包含(s)css模块导入和已经为您配置了很多。 我在webpack配置文件中包含了注释,以帮助您了解每个选项的作用。
否则,如果您尝试学习旧版本的webpack,则可以弹出create-react-app并进行反向工程/查看其大量的webpack注释。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.