如何在Webpack中渲染嵌套的SASS？ [英] How do you render nested SASS in webpack?

问题描述

采用以下CSS ...

Take the following css...

.MyComponent {

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

以及以下React组件...

And the following React component...

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

的样式。按钮似乎没有应用。

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

I'm using postcss-loader, sass-loader, style-loader and node-sass in my Webpack set-up.

推荐答案

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

Webpack is detecting the SASS file and if configured correctly it will put them all inside .css file.

因此，假设您的webpack.config.js配置为可以执行此操作（如果没有的话，那么会有很多React Starter Kit向您展示如何操作）

So, let's say for example your webpack.config.js is configured to do it (If not there are many React Starter Kit that will show you how)

使用应使用这样的类名称：

Use should use the class names like this:

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会处理样式表。

Assuming Webpack will take care the stylesheets.

这篇关于如何在Webpack中渲染嵌套的SASS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！