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

Posted 2023-02-22

【中文标题】你如何在 webpack 中渲染嵌套的 SASS？

【英文标题】：How do you render nested SASS in webpack?

【发布时间】：2016-10-20 05:52:14

【问题描述】：

取下面的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。

【参考方案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 会处理样式表。

【参考方案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')