我的NextJS项目具有以下Webpack配置:
import path from 'path';
import glob from 'glob';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import webpack from 'webpack';
import dotenv from 'dotenv';
import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin';
import withSass from '@zeit/next-sass';
dotenv.config();
module.exports = withSass({
distDir: '.build',
webpack: (config, { dev, isServer }) => {
if (isServer) {
return config;
}
config.plugins.push(
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1,
}),
);
config.optimization.minimizer.push(
new OptimizeCSSAssetsPlugin({}),
);
return config;
},
});
这使得我能够在任何页面导入任意数量的scss文件,并将它们全部捆绑在一起,作为单个文件进行压缩,并如此提供:
<link rel="stylesheet" href="/_next/static/css/styles.84a02761.chunk.css">
然而,我更喜欢将样式定义内联到我的
<head>
标签中,而不是使用 <link>
。是否有可能在不堆积大量第三方模块的情况下实现这一点?如果不行,那么能否将结果的
<link>
的 rel
更改为 preload
,并添加 as="style" crossorigin
?
const {assetPrefix, files } = this.context
。 - James Robert Singleton<style>...</style>
元素不是“内联样式”,而是嵌入式样式表。内联样式是通过style
属性直接应用于元素的 CSS 属性。 - callum