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会关注样式表。

Answer 2

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')
}

如何在webpack中呈现嵌套的SASS？

2 个答案: