如何在React组件中直接使用scss？

Question

我想在我的组件中直接使用scss。现在我导入这样的css：

import './test.css';

return (
    <Container>
      <Col sm="12">
        <div className="test_wrapper">

我想这样使用：    import'./test.scss';

return (
    <Container>
      <Col sm="12">
        <div className="test_wrapper">

Answer 1

正如评论已经提出的那样，您需要为scss安装webpack加载程序。

npm i -D sass-loader

并将规则添加到您的webpack配置中。

{
  test: /\.scss$/,
  use: [ 'css-loader', 'sass-loader' ],
},

如果你正在使用jest，你也应该调查jest-css-modules，否则你会遇到问题。