Question

我现在使用浏览器来转换我的代码，而在导入sass文件时却出错了

@import解析错误

任何人都可以帮助我解决如何使用和集成此问题

Answer 1

最近，React团队和许多贡献者发布了fantastic tool，用于基于一系列基本思想来创建无配置的React应用程序，以帮助初学者开始构建React应用程序而不必担心为初学者提供工具可能会令人生畏。

您可以通过两种方式将SASS或SCSS添加到create-react-app项目中。

安装方式：NPM脚本

此方法更简单，无需退出项目即可工作。如果您不想退出，请使用此方法。单击此处view the project’s official guide，了解如何使用NPM脚本安装Sass或Scss。

安装方式：Webpack

此方法不是那么简单，而是可以扩展和自动化。不幸的是，这种方法需要弹出。弹出项目，尽管在许多高级情况下很有用，但意味着对create-react-app的期货更新将不容易获得。

开始之前，通过在项目目录中运行以下命令之一，从所选的打包程序中安装并保存必要的工具。

纱线： yarn add sass-loader node-sass --dev

NPM： npm install sass-loader node-sass --save-dev

首先将sass或scss添加到您的create-react-app项目中，这需要您退出，这可以通过在项目的基本目录中执行以下命令来完成。

npm run eject

完成弹出后，找到config文件夹，该文件夹除其他事项外还包含两个webpack配置文件。这些配置文件中的每一个都对应于不同的环境-开发或生产。输入开发配置文件webpack.config.dev.js，然后在loaders块中找到modules块。

在webpack中，loaders允许开发人员在需要/加载文件时对其进行“预处理”。 Create react应用程序使用多个加载程序来处理各种构建任务，例如使用babel进行编译，使用PostCSS进行前缀或允许导入资产。要将Sass或Scss添加到该项目，您将添加一个可以处理Sass和Scss文件的加载程序。

loaders块的开始，在进行任何修改之前，应类似于以下代码（在将来的CRA版本中可能会更改确切的代码）。

loaders: [
  // Process JS with Babel.
  {
    test: /\.js$/,
    include: paths.appSrc,
    loader: 'babel',
    query: require('./babel.dev')
  },
  ...

在加载器数组开始之后，您可以为Sass和Scss添加自己的加载器。下面代码中的加载器数组中包含的“ sass”加载器能够处理Sass和Scss文件。

如果您喜欢SASS，则可以添加：

{
  test: /\.sass$/,
  include: paths.appSrc,
  loaders: ["style", "css", "sass"]
},

如果您喜欢SCSS，则可以添加：

{
  test: /\.scss$/,
  include: paths.appSrc,
  loaders: ["style", "css", "sass"]
},

重要：在较新版本的create-react-app中，如果您在webpack配置中看到exclude数组，则需要向其中添加以下行

/\.sass$/,
/\.scss$/,

现在已经安装了Sass和Scss加载器，您可以开始使用Sass / Scss文件。例如，在create-react-app随附的默认 App.js 组件中，您现在可以编写

import './App.sass'; // or `.scss` if you chose scss

请注意，您还必须将“ App.css”文件重构为Sass，并将其文件名更改为“ App.sass”。

引用来自this website。

Answer 2

使用最新版本的create-react-app，您不必退出自己的react应用即可添加sass支持。

只需将node-sass添加到您的项目中即可：

NPM：npm install node-sass --save

纱yarn add node-sass

现在您可以将sass文件导入您的react组件中。查看官方文档here

Answer 3

我正在使用“ scss”文件，并将其导入到组件时遇到了问题。

这是我找到的解决方案。

步骤1：更新Typings.d.ts（我正在使用TSX文件）。并在根级别添加以下代码

declare module '*.scss';

第2步：在组件（例如TodoComponent.tsx）文件中导入具有扩展名的scsss

import styles from "./score-widget.component.scss";

第3步：在return语句中添加样式

import * as React from "react";
import { IScoreWidget } from "../models/score-widget-model";
import styles from "./score-widget.component.scss";

function ScoreWidget(props) {

  const css = styles;  //storing styles in const

  return (
    <React.Fragment>

      <style>{css}</style>  //added css in code

      <div className="score-prop-container">
        <!--Your component logic goes here-->

      </div>
    </React.Fragment>
  );
}

export default ScoreWidget;

如何在react.js中包含sass文件

3 个答案:

安装方式：NPM脚本

安装方式：Webpack