如何在reactjs中包含sass文件

Question

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

@import 解析错误

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

Answer 1

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

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

新产品管理： npm install node-sass --save

纱 yarn add node-sass

现在您可以在 React 组件中导入 sass 文件。在此处查看官方文档

Answer 2

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

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

安装方式：NPM 脚本

这种方法更简单，无需弹出您的项目即可工作。如果您不想弹出，请使用此方法。单击此处查看有关如何使用 NPM 脚本安装 Sass 或 Scss的项目官方指南。

安装方式：Webpack

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

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

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

新产品管理： 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 中，加载器允许开发人员在需要/加载文件时“预处理”文件。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')
  },
  ...

在 loaders 数组开始之后，你可以为 Sass 和 Scss 添加你自己的加载器。下面代码中 loaders 数组中的“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”。

参考来自本网站。