使用 Typescript、React 和 Webpack 導入 SCSS

Question

我想 import.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'),
      },
    ],
  },
...

盒子.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);
}

盒子.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 。 我錯過了什么？

Answer 1

不確定這是否回答了您的問題，但我從未聽說過將 scss 導入項目本身。

scss 不只是為了更簡單的樣式，然后將其編譯為正常的 css 嗎？

我有 style.scss 和 style.css

在 npm 中，我使用“sass --watch style.scss style.css”。 每次保存 style.scss 文件時，這會將 style.scss 編譯為 style.css。

然后只需將 style.css 正常導入您的反應應用程序