我目前正在使用带有 React 的 CSS module来设计我的样式。所以我的每个组件都在它的组件特定的 css 文件中导入，如下所示：
import React from 'react';
import styles from './App.css';
const example = () => (
<div className={styles.content}>
Hello World!
</div>
);
export default example;
这在为单个组件设置样式时效果很好，但如何应用非组件特定的全局样式（html、正文、标题标签、div 等）？
由于您使用的是 ES6 导入语法，因此您可以使用相同的语法来导入您的样式表
import './App.css'
此外，您可以将您的类包装起来:global以切换到全局范围（这意味着 CSS module不会对其进行module化，例如：在它旁边添加一个随机 id）
:global(.myclass) {
background-color: red;
}
这可以通过简单地添加：
require('./App.css');
（感谢@elmeister 正确回答了这个问题。）
我遇到了同样的问题，并找到了以下解决问题的方法，您可以选择最适合您的方法
下面给出了一个示例：
// exclude all global styles for css modules
{
test: /\.(less|css)$/,
exclude: path.resolve(__dirname, './src/styles'),
use: [
{
loader: CssExtractPlugin.loader,
options: { hot: is_dev, reloadAll: is_dev }
},
{
loader: "css-loader",
options: {
modules: {
localIdentName: '[local]___[hash:base64:5]'
}
}
},
"postcss-loader",
"less-loader"
]
},
// process global styles without css modules
{
test: /\.(less|css)$/,
include: path.resolve(__dirname, './src/styles'),
use: [
{
loader: CssExtractPlugin.loader,
options: { hot: is_dev, reloadAll: is_dev }
},
"css-loader",
"postcss-loader",
"less-loader"
]
}
{
loader: "css-loader",
options: {
modules: {
localIdentName: '[local]___[hash:base64:5]',
mode: 'global',
}
}
},
如果您将 mode 定义为 global，则所有包含的 css 类都不会被替换为散列名称，而只会为您指定为 :local 的那些提供唯一名称。例如：
/* this will remain as is */
.header {
color: blue;
}
:local {
/* this will become something like item_xSH2sa */
.item {
color: yellow;
}
}
// regex to test for modules, loaderUtils is part of webpack dependencies
const cssModuleRegex = new RegExp(/\.module\.(less|css)$/);
const loaderUtils = require("loader-utils");
// inside webpack rules
{
test: /\.(less|css)$/,
use: [
{
loader: CssExtractPlugin.loader,
options: { hot: is_dev, reloadAll: is_dev }
},
{
loader: "css-loader",
options: {
modules: {
localIdentName: '[local]___[hash:base64:5]',
getLocalIdent: getLocalIdent
}
}
},
"postcss-loader",
"less-loader"
]
}
// this is a copy of the default function, modified slightly to achieve our goal
function getLocalIdent(loaderContext, localIdentName, localName, options) {
// return local name if it's a global css file
if (!cssModuleRegex.test(loaderContext.resourcePath)) {
return localName;
}
if (!options.context) {
// eslint-disable-next-line no-param-reassign
options.context = loaderContext.rootContext;
}
const request = path
.relative(options.context, loaderContext.resourcePath)
.replace(/\\/g, '/');
// eslint-disable-next-line no-param-reassign
options.content = `${options.hashPrefix + request}+${localName}`;
// eslint-disable-next-line no-param-reassign
localIdentName = localIdentName.replace(/\[local\]/gi, localName);
const hash = loaderUtils.interpolateName(
loaderContext,
localIdentName,
options
);
return hash
.replace(new RegExp('[^a-zA-Z0-9\\-_\u00A0-\uFFFF]', 'g'), '-')
.replace(/^((-?[0-9])|--)/, '_$1');
}
我发现全局导入样式但仅用于特定路由的唯一方法是添加：
<style dangerouslySetInnerHTML={{__html: `
body { max-width: 100% }
`}} />
在render方法的返回里面。
否则，style标签将被添加到<head>，并且样式将应用于所有下一条路线。
来自https://medium.learnreact.com/the-style-tag-and-react-24d6dd3ca974
也许样式可以作为字符串从文件导入，以使代码更有条理。
如果您想使用 css module，另一种简单的方法是：
<style jsx global>{`
.slick-prev:before,
.slick-next:before {
color: somecolor;
}
`}</style>