Babel/React - 将 scss/sass 导入转换为 css 导入

Question

我有React项目，我在其中使用.scss样式文件。我想知道是否可以将(使用 babel？(.scss 导入更改为.css导入。

现在：

import '.

/MyStylesFile.scss';

预期：

导入 './MyStylesFile.css';

然后原因是，在使用 webpack 时，我不知道什么用户，例如强制使用 sass-loader。

Answer 1

也许 babel-plugin-transform-rename-import 可以帮到你的情况。你可以在你的babel.rc中这样使用它

{
  ...,
  "env": {
    "production": {
      "plugins": [
        ["transform-rename-import",
         { "original": "./MyStylesFile.scss", 
           "replacement": "./MyStylesFile.css"
         }],
      ]
    }
  }
}

此外，它还支持更正则表达式用于更复杂的用例。确保树中的 env 与您编译的环境匹配。