4

我使用 browserify 来转换我的代码，现在在导入 sass 文件时出现错误

@import 解析错误

谁能帮我解决这个问题如何使用和集成

4

3 回答 3

7

使用最新版本的create-react-app你不必弹出你的 react 应用程序来添加 sass 支持。

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

新PM：npm install node-sass --save

纱yarn add node-sass

现在你可以在你的 react 组件中导入 sass 文件。在此处查看官方文档

于 2019-01-12T20:03:06.707 回答
5

最近，React 团队和一些贡献者发布了一个很棒的工具，用于基于一组最小的想法创建无配置的 React 应用程序，以帮助初学者深入构建 React 应用程序，而不必担心初学者可能会感到畏惧的工具。

有两种方法可以添加SASS或添加SCSS到create-react-app项目中。

安装方式：NPM 脚本

这种方法更简单，可以在不弹出项目的情况下工作。如果您不想弹出，请使用此方法。单击此处查看项目的官方指南，了解如何使用 NPM 脚本安装 Sass 或 Scss。

安装方式：Webpack

这种方法没有那么简单，但更具可扩展性和自动化程度。不幸的是，这种方法需要弹出。弹出一个项目，虽然在许多高级情况下很有用，但意味着create-react-app你将不容易获得期货更新。

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

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

新PM： npm install sass-loader node-sass --save-dev

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

npm run eject

弹出完成后，找到 config 文件夹，其中包含两个 webpack 配置文件。这些配置文件中的每一个都对应于不同的环境——开发或生产。进入开发配置文件，在区块内webpack.config.dev.js定位区块。loadersmodules

在 webpack 中，加载器允许开发人员在需要/加载文件时“预处理”文件。Create react app 使用多个加载器来处理各种构建任务，例如使用 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 中，如果您exclude在 webpack 配置中看到一个数组，则需要将以下行添加到

/\.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”。

参考取自本网站。

于 2018-09-19T14:51:14.503 回答
1

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

这是我找到的解决方案。

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

declare module '*.scss';

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

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

第三步：在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;
于 2019-09-03T06:58:23.577 回答