Question

使用css-loader

{
        test: /\.s?css$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader',
            query: {
              modules: true,
              localIdentName: '[name]-[local]-[hash:base64:8]'
            }
          },
          { loader: 'sass-loader'}
        ]
      }

以这种方式配置，css-loader似乎无法在类名称下找到css规则。屏幕上不会应用div.profile下列出的css规则。 css-loader版本。我的代码中的1.0.0与Node 10.x一起运行。切换modules: false即可显示所需的样式。

代码发布在下面。

main.js：

require('babel-runtime/regenerator');
require('babel-register');                   
require('webpack-hot-middleware/client?reload=true');
require('./index.html');

index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Webpack 4</title>
  </head>
  <body>
    <div class="profile">
      <img src="./images/400.jpg" alt="">
      <h1>Hello Webpack 4</h1>
      <div id="react-root"></div>
    </div>
    <script src="/main-bundle.js"></script>
  </body>
</html>

app.js：

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './counter';
import { AppContainer } from 'react-hot-loader';

const render = (Component) => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    document.getElementById('react-root')
  );
};

render(Counter);

if (module.hot) {
  module.hot.accept('./counter', () => {
    render(require('./counter'));
  });
}

counter.js：

import React, { Component } from 'react';
import { hot } from 'react-hot-loader';
import { css } from 'emotion';
import styled from 'react-emotion';
import styles from './main.scss';

const Fancy = styled('h1')`
  color: ${props => props.wild ? 'hotpink' : 'gold'}
`;

const red = '#f00';

const className = css`
  color: ${red};
  font-size: 3rem;
`;

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.addCount = this.addCount.bind(this);
  }

  addCount() {
    this.setState(() => ({ count: this.state.count + 1 }));
  }

  render() {
    const isWild = this.state.count % 2 === 0;
    return (
      <div className={styles.counter}>
        <h1 onClick={this.addCount} className={className}>Count: {this.state.count}</h1>
        <Fancy wild={isWild}>react-emotion lib allows to hook styles to component names</Fancy>
      </div>
    );
  }
}

export default hot(module)(Counter);

main.scss：

body {
  background-color: #a1b2c3;
}

.profile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;

  img {
    border-radius: 50%;
    box-shadow: 0 0 20px #000;
  }

  h1 {
    font-family: 'source-code-pro', 'sans-serif';
    font-weight: 400;
  }
}

.counter {
  border: 3px solid green;
}

Answer 1

原因是index.html中的.profile类名在counter.js范围之外。 css模块通过localIdentName模式生成类名，但是.profile类名是在counter.js中的css模块起作用之前在index.html中进行硬编码的。

在counter.js中

import styles from './main.scss';
console.log('styles:', styles);

输出

styles: Object { profile: "main-profile-2P-yNf0J", counter: "main-counter-Pmp5YERO" }

我还不清楚如何将main-profile-2P-yNf0J类名获取到index.html。

css模块查询使用最新的css-loader破坏了css规则

1 个答案: