如何使用Typescript、React和Webpack导入SCSS或CSS模块

Question

我想在我使用React和TypeScript构建的项目中使用`.scss`文件，所以我使用了`typings-for-css-modules-loader`与`css-loader`和`sass-loader`。当我运行 `npm run dev` 时，我遇到了以下错误：

./src/Common.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

.common {
^
      Invalid CSS after "e": expected 1 selector or at-rule, was "exports = module.ex"

我喜欢这样写我的.scss：

.common {
  height: 100px
}

我的webpack配置文件如下：

module.exports = {
    mode: 'development',
    entry: [
        'webpack-dev-server/client',
        path.resolve(root, 'src/index.tsx')
    ],
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
        publicPath: '/',
        port: 8080,
        historyApiFallback: true
    },
    resolve: {
        extensions: [".ts", ".tsx", ".scss", ".js", ".json", "css"]
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new BundleAnalyzerPlugin(),
        new MiniCssExtractPlugin({
            filename: devMode ? '[name].css' : '[name].[hash].css',
            chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
        })
    ],
    output: {
        filename: 'bundle.js',
        path: path.resolve(root, 'dist'),
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader'
            },
            {
                test: /\.(js|jsx)$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [{
                    loader: devMode ? MiniCssExtractPlugin.loader : 'style-loader'
                }, {
                    loader: 'css-loader',
                    options: {
                        sourceMap: true,
                        modules: true,
                    }
                }, {
                    loader: 'sass-loader', options: {
                        sourceMap: true
                    }
                }]
            },
            { test: /\.(c|sc)ss$/, loader: 'typings-for-css-modules-loader?modules&sass' },
            {
                test: /\.(jpg|png|gif)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name (file) {
                            if (devMode === 'development') {
                              return '[path][name].[ext]'
                            }

                            return '[hash].[ext]'
                        }
                    }
                }]
            }
        ]
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

当我使用css-loader与sass-loader或单独使用typings-for-css-modules-loader时，这个错误就被解决了。

但是我遇到了另一个类似于这样的错误：

ERROR in /Users/hly/Bpeanut.github.io/src/app/HeaderBar.tsx
./src/app/HeaderBar.tsx
[tsl] ERROR in /Users/hly/Bpeanut.github.io/src/app/HeaderBar.tsx(40,39)
      TS2339: Property 'header' does not exist on type 'typeof import("/Users/hly/Bpeanut.github.io/src/app/HeaderBar.scss")'.

HeaderBar.tsx 就像这样（错误在此处）：

import * as styles from './HeaderBar.scss';

class default HeaderBar extends Component {
    render() {
        return(<div className={styles.header}>123</div>)
                                        ^
    }
}

还有像HeaderBar.scss这样的：

.header {
    height: 100px;
}

HeaderBar.scss.d.ts:

export interface IHeaderBarScss {
  'header': string;
}

export const locals: IHeaderBarScss;

现在我找到了另一种解决方法。

使用const styles = require('./HeaderBar.scss');而不是import * as styles from './HeaderBar.scss';

它可以正常工作。

谢谢。

- Love Y.H

---

根据文档，您需要将 css-loader 替换为 typings-for-css-modules-loader。目前您两者都在使用，这可能会导致错误。 - marzelin

Answer 1

我在使用css和scss的项目中并没有使用typings-for-css-modules-loader，而且这个配置也很好用：

Original Answer翻译成“最初的回答”：

{
    test: /\.s?css$/,
    use: [
        {
            loader: MiniCssExtractPlugin.loader,
            options: {
                sourceMap: true
            }
        },
        {
        loader: 'css-loader',
            options: {
                sourceMap: true
            }
        },
        {
            loader: 'sass-loader',
            options: {
                sourceMap: true
            }
        }
    ]
},

"最初的回答"：这解决了你的错误吗？

- johannchopin

---

谢谢。我之前和你用过同样的方法来解决这个错误。但是现在又出现了另一个问题。 - Love Y.H

@LoveY.H 最新的是什么？ - johannchopin

我把它写在了webpack.config下面。这是我的错。谢谢。 - Love Y.H

@LoveY.H 好的 :) 在这种情况下，请验证我的答案。 - johannchopin

Answer 2

我在寻找一种在我的create-react-app项目中使用CSS模块的方法时发现了这个问题。因此，为create-react-app场景添加答案。

SCSS或CSS模块文件名应以module.scss或module.css结尾，才能在create-react-app项目中使用。

下面的示例展示了一个组件QuestionForm.tsx和一个SCSS模块QuestionForm.module.scss如何一起工作。

// QuestionForm.tsx

import React, { useState } from 'react';
import style from './QuestionForm.module.scss';

export type PersonalData = {
  name: string;
};

type QuestionFormProps = {
  personalData: PersonalData;
  onChange: (data: PersonalData) => void;
};

export const QuestionForm: React.FC<QuestionFormProps> = ({ personalData, onChange }) => {
  const [name, setName] = useState<string>(personalData.name);

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    onChange({ name });
  };

  const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setName(event.target.value);
  };

  return (
    <form className={style.container} onSubmit={handleSubmit}>
      <div className={style.titleWrapper}>
        <h2 className={style.title}>Questionnaire</h2>
      </div>
      <label>
        What is your name?
        <input type="text" minLength={2} maxLength={20} value={name} onChange={handleNameChange} required />
      </label>
      <div className={style.cta}>
        <input className="buttonPrimary" type="submit" value="Submit" />
      </div>
    </form>
  );
};

// QuestionForm.module.scss

@mixin flex($direction: row, $align: center, $justify: center) {
  align-items: $align;
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  width: 100%;
}

.container {
  @include flex(column, flex-end, space-evenly);

  border: 1px solid whitesmoke;
  border-radius: 5px;
  height: 230px;
  padding: 0 10px;
  width: 400px;
}

.cta {
  @include flex();
}

.titleWrapper {
  @include flex();
}

.title {
  font-size: 1.5rem;
  font-weight: bold;
}

- HelloWorld101

Answer 3

将sass-loader与css-loader和style-loader链接起来，以立即将所有样式应用于DOM。

npm install style-loader css-loader sass-loader --save-dev

// webpack.config.js

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader" // compiles Sass to CSS, using Node Sass by default
            ]
        }]
    }
};

如需更多信息，请访问Sass加载器

- Murtaza Hussain