javascript - 你如何在 webpack 中渲染嵌套的 SASS？

Question

采用以下 css...

.MyComponent {

  color: blue;
  .Button {
    color: red;
  }
}

还有下面的 React 组件……

import React from 'react'
import classes from './MyComponent.scss'

export const MyComponent = props =>
  <div className={classes.MyComponent}>
    <button className={classes.Button}>My Button</button>
  </div>

export default MyComponent

.Button 的样式似乎没有应用。

我在我的 Webpack 设置中使用了 postcss-loader、sass-loader、style-loader 和 node-sass。

Answer 1

Webpack 正在检测 SASS 文件，如果配置正确，它将把它们全部放在 .css 文件中。

因此，假设您的 webpack.config.js 配置为执行此操作(如果没有，则有许多 React Starter Kit 将向您展示如何操作)

使用应该使用这样的类名:

import React from 'react'
import './MyComponent.scss'

export const MyComponent = props =>
  <div className="MyComponent">
    <button className="Button">My Button</button>
  </div>

export default MyComponent

假设 Webpack 会处理样式表。