采用以下 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。
最佳答案
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 会处理样式表。
关于javascript - 你如何在 webpack 中渲染嵌套的 SASS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37897711/