[如何配置next.js以通过CSS模块支持同时顺风CSS?我想用tailwindcss包装整个项目:
// /tailwind.scss
:global {
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
}
// /test-module.css
.example {
font-size: 36px;
}
// /pages/_app.jsx
import '../talwind.scss';
...
并且在示例组件中:
// /components/my-component.jsx
import css from '../test-module.css';
const Test = () => (
<div className={`bg-red-500` ${css.example}}>Test Tailwind with CSS</div>
);
解决方案是拆分式Webpack样式加载器。全局css的加载器,css模块的加载器,因此webpack加载器如下所示:
{
test: /\.s?[ac]ss$/,
exclude: /\.global.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: !isProduction,
reloadAll: true,
},
},
// 'css-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: {
localIdentName: '[name]__[local]___[hash:base64:5]',
},
},
},
'postcss-loader',
{ loader: 'sass-loader', options: { sourceMap: true } },
],
},
{
test: /\.global.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: !isProduction,
reloadAll: true,
},
},
'css-loader',
'postcss-loader',
],
},