我在我的react应用程序中使用css模块,但是当我尝试在.js文件中导入外部文件时,无法将它们全局导入,因为无法将它们包装在:global
块中,webpack会将它们解释为要用作对象的样式。
如何从外部库导入CSS文件作为全局CSS? 这是与导入的插件匹配的CSS。
例如,在src / index.js中:
import 'draft-js/dist/Draft.css';
//cannot wrap in a :global block since it is imported
import 'react-responsive-carousel/lib/styles/carousel.min.css';
// is wrapped in a :global {...} block, so it works
import './styles/app.css';
Webpack配置,来自Create-React-App
test: /\.css$/,
loader: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
minimize: true,
},
},
'postcss-loader'
]