Question

我刚刚将nextjs从8更新到9.3.3，我的某些样式坏了。

以前，我正在导入.scss文件，它们在本地范围内是其各自的组成部分。

在更新到9.3.3之后，似乎具有相同名称的classNames的组件现在正在共享样式，因此使我相信{{中的sass-loader或css-loader 1}}似乎不正确。

这是我的next.config.js

next.config.js

我尝试过的

我正在这样更改我的配置：

const path = require('path');

const dotenv = require('dotenv');
const withSass = require('@zeit/next-sass');
const webpack = require('webpack');

const envConfig = dotenv.config();

const config = withSass({
    cssModules       : true,
    cssLoaderOptions : {
        modules       : true,
        sourceMap     : true,
        importLoaders : 1,
    },
    sassLoaderOptions: {
        includePaths: [path.resolve(__dirname, './')], //eslint-disable-line
    },

    useFileSystemPublicRoutes: false,

    webpack: (config, { buildId, dev, isServer, defaultLoaders }) => { // eslint-disable-line
        const ENV = {};

        for (let entry in envConfig.parsed) {
            ENV[`process.env.${entry}`] = JSON.stringify(envConfig.parsed[entry]);
        }

        config.plugins.push(new webpack.DefinePlugin(ENV));

        return config;
    },
});

module.exports = config;

不起作用。

起作用的最后一个方法是手动进入每个const config = withSass({ cssModules : true, cssLoaderOptions : { modules : { mode: 'local', exportGlobals: true, localIdentName: '[path][name]__[local]--[hash:base64:5]', context: path.resolve(__dirname, 'src'), //eslint-disable-line hashPrefix: 'my-custom-hash', }, sourceMap : true, importLoaders : 1, }, sassLoaderOptions: { includePaths: [path.resolve(__dirname, './')], //eslint-disable-line }, useFileSystemPublicRoutes: false, webpack: (config, { buildId, dev, isServer, defaultLoaders }) => { // eslint-disable-line const ENV = {}; for (let entry in envConfig.parsed) { ENV[`process.env.${entry}`] = JSON.stringify(envConfig.parsed[entry]); } config.plugins.push(new webpack.DefinePlugin(ENV)); return config; }, }); module.exports = config;文件并将其更改为.scss，这将花费大量时间进入每个文件。我的配置有问题吗？

将nextjs从8更新到9.3.3破坏了样式

我尝试过的

0 个答案: