css - React with SASS - 如何在 React 中使用 SASS

Question

那么，SASS在react中的基本用法是

安装node-sass并在index.js文件中导入./mysass.scss

我做了同样的事情，它与 bootstrap SASS 一起工作。

我已成功在 index.js 文件中导入 bootstrap.scss

import 'bootstrap/scss/bootstrap.scss';

但是，现在如果我尝试导入我的，它不起作用。

让我向您提供一些有关我的 SASS 文件的信息。

• 我的 style.scss 文件在 sass 中使用 @use 而不是 @import 导入其他 CSS 模块。

  例如

    Using -> `@use 'sections/navbar';`
    Instead of  -> `@import 'sections/navbar';`
  

• 我也在使用@use "sass:map";

这个@use会产生问题吗？

我已经检查了 bootstrap.scss 文件，它们正在使用 @import。

Answer 1

在 Github 上查看此问题:Link 。用户asyncLiz发布的解决方案。

That error is typically seen when using the node-sass implementation, which does not support Sass modules and is not supported by MDC. You'll need to use the Dart sass implementation.

Luckily it's an easy replacement when using sass-loader. Run npm uninstall node-sass && npm install sass. sass-loader will automatically use the new implementation.

If it does not, check your webpack.config.js in case you're manually specifying the implementation in your sass-loader options. If you are, change implementation: require('node-sass') to implementation: require('sass').