拿下面的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 会处理样式表。
Webpack 新手在这里。我有同样的问题。我的 webpack.conf.js 中有这个。
{
test: /\.css$/,
loader: ExtractTextWebpackPlugin.extract('style-loader', 'css-loader')
},
{
test: /\.scss$/,
loader: "style!css!sass"
}
我删除了 scss 位，所以它只是
{
test: /\.css$/,
loader: ExtractTextWebpackPlugin.extract('style-loader', 'css-loader')
}