具有全局 CSS 导入的 NextJS 在生产模式下失败
NextJS with global CSS import fail in production mode
我将 Next.JS 与其他几个模块一起使用。其中之一,Megadraft,自带 CSS。我不知道这是否相关,但我也使用 PurgeCSS.
在开发模式下一切正常,但 CSS 似乎在生产模式下出现故障。更明确一点,Megadraft 的所有 类,在生产模式下似乎都没有定义。
检查器中的 HTML 节点仍然显示 类 在这里,但它们没有定义。
以下是我在 pages/_app.js
文件中导入上述 CSS 文件的方法:
// pages/_app.js
import "css/tailwind.css";
import "megadraft/dist/css/megadraft.css";
这是我的 postcss.config.js
:
// postcss.config.js
const purgecss = [
"@fullhuman/postcss-purgecss",
{
content: [
"./components/**/*.js",
"./Layout/**/*.js",
"./pages/**/*.js",
"./node_modules/next/dist/pages/**/*.js",
"./node_modules/next/dist/Layout/**/*.js",
"./node_modules/next/dist/components/**/*.js"
],
defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
},
];
module.exports = {
plugins: [
"postcss-import",
"tailwindcss",
"autoprefixer",
...(process.env.NODE_ENV === "production" ? [purgecss] : []),
],
};
我正在使用下一个 ^9.4.4
。可能值得注意的是 TailwindCSS 似乎工作得很好(在开发和生产中),但我认为这可能是因为它在 postcss 中用作插件...
为了以防万一,我将 webpack 集成到我的项目中以解决代码告诉我需要 loader
:
的错误
// next.config.js
module.exports = {
cssModules: true,
webpack: (config, options) => {
config.node = {
fs: "empty",
};
config.module.rules.push({
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
use: [
options.defaultLoaders.babel,
{
loader: "url-loader?limit=100000",
},
{
loader: "file-loader",
},
],
});
return config;
},
};
无论如何,如果有人知道为什么这在开发模式下有效而不在生产模式下有效,那可能会有很大帮助。
选项 1:使用 Tailwind CSS 内置 PurgeCSS
// tailwind.config.css
module.exports = {
purge: ["./components/**/*.js", "./pages/**/*.js"],
theme: {
extend: {}
},
variants: {},
plugins: []
};
// postcss.config.js
module.exports = {
plugins: ["tailwindcss", "postcss-preset-env"]
};
请务必将 postcss-preset-env
添加到包的开发依赖项中 npm i --save-dev postcss-preset-env
或 yarn add -D postcss-preset-env
。
选项 2:手动设置清除并添加 "./node_modules/megadraft/dist/**/*.css"
到清除白名单内容数组:
// tailwind.config.css
module.exports = {
theme: {
extend: {}
},
variants: {},
plugins: []
};
// postcss.config.js
const purgecss = ['@fullhuman/postcss-purgecss',{
content: ["./node_modules/megadraft/dist/**/*.css", "./components/**/*.js", "./pages/**/*.js"],
defaultExtractor: content => {
const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []
const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []
return broadMatches.concat(innerMatches)
}
}]
module.exports = {
plugins: [
'tailwindcss',
'autoprefixer',
...process.env.NODE_ENV === 'production'
? [purgecss]
: []
]
}
可能还有更好的解决方案,但我能想到的就是这两个。
我将 Next.JS 与其他几个模块一起使用。其中之一,Megadraft,自带 CSS。我不知道这是否相关,但我也使用 PurgeCSS.
在开发模式下一切正常,但 CSS 似乎在生产模式下出现故障。更明确一点,Megadraft 的所有 类,在生产模式下似乎都没有定义。 检查器中的 HTML 节点仍然显示 类 在这里,但它们没有定义。
以下是我在 pages/_app.js
文件中导入上述 CSS 文件的方法:
// pages/_app.js
import "css/tailwind.css";
import "megadraft/dist/css/megadraft.css";
这是我的 postcss.config.js
:
// postcss.config.js
const purgecss = [
"@fullhuman/postcss-purgecss",
{
content: [
"./components/**/*.js",
"./Layout/**/*.js",
"./pages/**/*.js",
"./node_modules/next/dist/pages/**/*.js",
"./node_modules/next/dist/Layout/**/*.js",
"./node_modules/next/dist/components/**/*.js"
],
defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
},
];
module.exports = {
plugins: [
"postcss-import",
"tailwindcss",
"autoprefixer",
...(process.env.NODE_ENV === "production" ? [purgecss] : []),
],
};
我正在使用下一个 ^9.4.4
。可能值得注意的是 TailwindCSS 似乎工作得很好(在开发和生产中),但我认为这可能是因为它在 postcss 中用作插件...
为了以防万一,我将 webpack 集成到我的项目中以解决代码告诉我需要 loader
:
// next.config.js
module.exports = {
cssModules: true,
webpack: (config, options) => {
config.node = {
fs: "empty",
};
config.module.rules.push({
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
use: [
options.defaultLoaders.babel,
{
loader: "url-loader?limit=100000",
},
{
loader: "file-loader",
},
],
});
return config;
},
};
无论如何,如果有人知道为什么这在开发模式下有效而不在生产模式下有效,那可能会有很大帮助。
选项 1:使用 Tailwind CSS 内置 PurgeCSS
// tailwind.config.css
module.exports = {
purge: ["./components/**/*.js", "./pages/**/*.js"],
theme: {
extend: {}
},
variants: {},
plugins: []
};
// postcss.config.js
module.exports = {
plugins: ["tailwindcss", "postcss-preset-env"]
};
请务必将 postcss-preset-env
添加到包的开发依赖项中 npm i --save-dev postcss-preset-env
或 yarn add -D postcss-preset-env
。
选项 2:手动设置清除并添加 "./node_modules/megadraft/dist/**/*.css"
到清除白名单内容数组:
// tailwind.config.css
module.exports = {
theme: {
extend: {}
},
variants: {},
plugins: []
};
// postcss.config.js
const purgecss = ['@fullhuman/postcss-purgecss',{
content: ["./node_modules/megadraft/dist/**/*.css", "./components/**/*.js", "./pages/**/*.js"],
defaultExtractor: content => {
const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []
const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []
return broadMatches.concat(innerMatches)
}
}]
module.exports = {
plugins: [
'tailwindcss',
'autoprefixer',
...process.env.NODE_ENV === 'production'
? [purgecss]
: []
]
}
可能还有更好的解决方案,但我能想到的就是这两个。