Question

我在一个项目中正在使用NextJs。该项目有两个方面：一个是“公共页面侧” ，下一个是“管理面板侧” 。只是为了说明，假设 public.js （在pages文件夹内）呈现了公共页面，而 admin.js 呈现了管理页面，并且两者的样式确实有所不同（主题）。

admin.scss被导入adminpage.js文件中。

import "../static/styles/admin.scss";      
export default () => (<h1> Admin Page </h1>);

public.scss已导入publicpage.js文件中。

import "../static/styles/public.scss";      
export default () => (<h1> Public Page </h1>);

当我导航到“ HOST：PORT / admin” URL时，管理页面的样式正确呈现。之后，如果我导航到“ HOST：PORT / public” URL，此页面将包含“ public.scss”和“ admin.scss”（而不是仅导入public.scss文件）中的样式，这将导致某些CSS属性重叠。如果我导航回到“ HOST：PORT / admin” URL，该页面还将包含“ public.scss”和“ admin.scss”文件中的样式。

我用来解决此问题的方法之一是将SCSS转换为CSS，然后将CSS注入HEAD（下一步/ head）内部的链接标记中。

 /* For admin page */
 <Head>
       <link href="../static/styles/admin.css" rel="stylesheet" />
 </Head>

 /* For public page */
 <Head>
       <link href="../static/styles/public.css" rel="stylesheet" />
 </Head>

我想在页面级别使用SCSS，而没有一个页面的样式与另一页面的样式混淆。

有什么好的方法吗？

我的next.config.js类似于：

const withCss = require("@zeit/next-css");
const withSass = require('@zeit/next-sass');

if (typeof require !== "undefined") {
    require.extensions[".less"] = () => {};
    require.extensions[".css"] = file => {};
}

module.exports = withCss(withSass({
    publicRuntimeConfig: {...},
    webpack: function(config) {
        const originalEntry = config.entry;
        config.entry = async () => {
            const entries = await originalEntry();
            if (
                entries["main.js"] &&
                !entries["main.js"].includes("./polyfills.js")
            ) {
                entries["main.js"].unshift("./polyfills.js");
            }
            return entries;
        };

        config.module.rules.push({
            test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
            use: {
                loader: "url-loader",
                options: {
                    limit: 100000,
                    name: "[name].[ext]"
                }
            }
        });
        return config;
    }
}));

页面级SCSS导入问题-NextJS

0 个答案: