工具:
反应16.8.3 reactstrap 7.1.0
我已按照此处https://reactstrap.github.io/
的说明进行操作,但仍然遇到错误。我从他们的github页面知道了这个解决方案:
{ test: /\.css$/, loader: 'style-loader!css-loader' }
,但是该配置文件似乎已过时。我只会收到此错误:
Module not found: Can't resolve 'style-loader!css-loader'
这是我的webpack配置:
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: Object.assign(
{},
shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
),
},
{
loader: 'style-loader!css-loader',
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
],
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
},
].filter(Boolean);
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]',
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
}
答案 0 :(得分:0)
(我的声誉不足,无法在您的问题中添加评论)
好吧,我想启用CSS模块,所以我最终做到了。 我花了一段时间才弄清楚新版本。 成功弹出后,只需编辑 webpack.config.js 文件并添加两行代码(请检查下面的代码)
....
....
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
modules: true, // add this line
localIdentName: "[name]__[local]__[hash:base64:5]", // add this line too
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment
}),
....
....
更多图片如何使用CSS加载器:
我的 Layout.css 文件:
我的 Layout.js 文件: