使用 Typescript、React 和 Webpack 导入 SCSS答案

【问题标题】：Import SCSS with Typescript, React and Webpack使用 Typescript、React 和 Webpack 导入 SCSS
【发布时间】：2021-06-28 06:24:47
【问题描述】：

我想导入 .scss 类并将其应用于 React 组件的 className 属性。

我的项目树如下：

root/
  ...
  config/
    ...
    webpack.config.js
  src/
    ...
    global.d.ts
    app/
      ...
      components/
        layout/
          ...
          Box/
            Box.scss
            Box.tsx

.d.ts 文件：

declare module '*.scss' {
  const content: { [className: string]: string }
  export = content
}

webpack.config.js

...
module: {
    rules: [
      // assets (.css, .scss)
      {
        test: /\.s?css$/i, // s[ac]ss
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
      // typescript
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: path.resolve(rootPath, 'node_modules'),
      },
    ],
  },
...

Box.scss

.Box {
  padding: 16px;
  border-radius: 4px;
  text-align: center;
  color: #ede9f9;
  font-weight: 700;
  background-color: #47b0b0;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
}

Box.tsx

import * as React from 'react'
import * as styles from './Box.scss'

type BoxProps = {
  children: React.ReactNode
}

const Box = ({ children }: BoxProps) => <div className={styles.Box}>{children}</div>

export default Box

console.log(styles.Box) 打印 undefined。我错过了什么？

【问题讨论】：

标签： javascript reactjs typescript webpack sass

【解决方案1】：

不确定这是否回答了您的问题，但我从未听说过将 scss 导入项目本身。

scss 不只是为了更简单的样式，然后将其编译为普通 css 吗？

我有 style.scss 和 style.css

在 npm 中，我使用“sass --watch style.scss style.css”。这会在您每次保存 style.scss 文件时将 style.scss 编译为 style.css。

然后将 style.css 正常导入到你的 react 应用程序中

【讨论】：