javascript - 从css-loader 0.28.11迁移到3.2.0，导入的样式为空对象(Migrating from css-loader 0.28.11 to 3.2.0, imported style is empty object)

Question

I'm using server-side-rendering and this in what I used to have in webpack.config.server.js :

(我正在使用服务器端渲染，这是我以前在webpack.config.server.js中webpack.config.server.js ：)

      {
        test: /.scss$/,
        use: [
          {
            loader: 'css-loader/locals',
            options: {
              url: false,
              localIdentName: '[local]--[hash:base64:8]'
            }
          },
          'sass-loader'
        ]
      },

and in webpack.config.client.js :

(并在webpack.config.client.js ：)

      {
        test: /.s?css$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },

When I upgraded all these packages the only thing that didn't work was the css-loader/locals .

(当我升级所有这些软件包时，唯一不起作用的是css-loader/locals 。)

I found on their github page that the local feature is now inside options .

(我在他们的github页面上发现local功能现在位于options 。)

So after reading the docs I ported the above webpack.config.server.js as:

(因此，阅读文档后，我将上述webpack.config.server.js移植为：)

      {
        test: /.scss$/,
        use: [
          {
            loader: 'css-loader',
            options: {
              onlyLocals: true,
              url: false,
              modules: {
                localIdentName: '[local]--[hash:base64:8]'
              },
              importLoaders: 1
            }
          },
          'sass-loader'
        ]
      },

webpack.config.client.js required no changes.

(webpack.config.client.js不需要任何更改。)

Now I have a setup that kind of works.

(现在，我进行了这样的设置。)

One of my pages has something like:

(我的其中一页内容如下：)

import style from './style.scss';

console.log('profile-page', style);

<div className={style.profilePage}></div>

while in my terminal (server side rendering) I see the correct mappings that css-loader created for all the classes:

(在终端（服务器端渲染）中，我看到了css-loader为所有类创建的正确映射：)

profile-page {
  'user-container': 'user-container--1J8DTs8d'
} // this is the style object

which is the only class in style.scss:

(这是style.scss中唯一的类：)

@import '~client/shared/scss/single-page';

:local(.profilePage) {
  .user-container {
    width: 80%;
    margin-left: 15px;
  }
}

when the above console log runs inside the browser I'm getting and empty object printed in the console.

(当上面的控制台日志在浏览器中运行时，我得到的是在控制台中打印空对象。)

style-loader still correctly inlines this style because if I change style.scss to have .profile-page instead of :local(.profilePage) and I use that in component: <div className='profile-page'></div> it renders correctly.

(style-loader仍然正确地内联此样式，因为如果我将style.scss更改为.profile-page而不是:local(.profilePage)并且在组件中使用了它： <div className='profile-page'></div>它正确呈现。)

  ask by Akos K translate from so

Answer 1

等待大神答复