如果我想在create react应用中使用SASS，我必须弹出吗？
不需要弹出。在create react应用中使用SASS，你可以按照以下步骤进行设置：
- 首先，确保你已经安装了create react应用的脚手架工具。如果没有安装，可以使用以下命令进行安装：npm install -g create-react-app
- 创建一个新的React应用：create-react-app my-app
- 进入到新创建的应用目录：cd my-app
- 安装node-sass库，它允许你在React应用中使用SASS：npm install node-sass
- 打开src目录下的index.js文件，将文件扩展名从.js改为.scss：index.scss
- 在index.scss文件中，你可以编写SASS代码。
- 在src目录下的index.js文件中，导入index.scss文件：import './index.scss';
现在，你可以在create react应用中使用SASS了。编写的SASS代码会被自动编译成CSS，并应用到你的React组件中。
推荐的腾讯云相关产品：无
注意：以上步骤仅适用于使用create react-app脚手架创建的React应用。如果你使用其他方式创建React应用，可能需要进行不同的设置。
相关·内容
如果我想在我的CSS中使用Sass，我必须弹出我的create-react-app项目吗？
浏览 9提问于2017-11-29得票数 0
在create-react-app中安装sass的最佳方式是什么？(npm运行弹出或node-sass-chokidar)
我能得到一些帮助吗？谢谢。
浏览 0提问于2018-07-31得票数 4
我最近将一个create-react-app迁移到了typescript。迁移后，我的scss文件在.tsx组件中被忽略。我像这样导入文件：
import './styles/scss/style.scss';
这在js中运行得很好。我已经安装了node-sass，甚至尝试安装@types/node-sass。我想在不弹出的情况下这样做。都会很感谢你的帮助。
浏览 1提问于2018-11-03得票数 4
1回答
我最近弹出了我的create-react-app，因为我需要加载sass文件。不幸的是，create-react-app使用的是webpack 1。但是，当前版本的sass-loader包含了对webpack 2的依赖。支持文档中没有指明支持webpack 1的最新sass-loader版本。谁知道我在哪里可以找到这个信息？
浏览 7提问于2017-02-24得票数 0
回答已采纳
1回答
我正在做一个用create-react-app构建的React项目。我有一个名为common.scss的文件，其中保存了变量列表，例如：
$blue: 'blue';
$red: 'red';
使用node-sass-chokidar对SCSS文件进行预处理。
我希望能够将这些变量导入到我的jsx文件中，但在不弹出的情况下，我找不到一种明确的方法来做到这一点。你能告诉我一种不弹出的方法吗？
谢谢。
浏览 0提问于2018-06-10得票数 3
1回答
我正在重写一个使用Bourbon的“旧”React原型，它还在一个gulpfile中使用gulpfile注入一个节点整洁的依赖项：
var sassOptions = {
includePaths: require('node-neat').includePaths,
};
我想使用create-react-app样板，并通过使用npm脚本编译sass文件(也是因为create限制了您这样做)，对样式有一个“简单”的工作流，但是我想不出如何做到这一点。
"build-css": "node-sass src/styles/ -o src/"
浏览 2提问于2017-04-20得票数 7
我用create-react-app命令创建了一个React项目，它使用webpack。
为了使用SASS，我需要使用npm run eject命令弹出，并在加载器数组中手动添加SCSS加载程序。
这是我第一次使用React，我使用的是每种共组件风格的方法，它包括在每个组件中导入一个.scss文件。
我在~/my-project-folder/src/assets/styles/_variables.scss中有一个全局变量文件，我想从~/my-project-folder/src/scenes/Auth/Login/styles/login.scss导入它，当然我不想做类似@import &
浏览 0提问于2017-04-24得票数 1
我想在我的应用程序中添加.scss支持，这个应用程序是使用create创建的。
我弹出了npm run eject并安装了必要的依赖项：npm install sass-loader node-sass --save-dev
在config/webpack.config.dev.js内部，我向加载程序添加了以下代码片段：
{
test: /\.scss$/,
include: paths.appSrc,
loaders: ["style", "css", "scss"]
},
因此，加载器数组的开头现在如下所示：
loaders
浏览 0提问于2016-11-08得票数 11
回答已采纳
1回答
无法创建React应用程序
、、、、
我有以下项目：
我有一个具有以下结构的源文件夹src
src/
├── sass/
│ └── sass files
│
├── js/
│ ├── admin
│ │ └── React project (an Admin Dashboard)
│ │
│ └── main
│ └── Javascript for the main site
│
└── pug/
└── pug files
我使用create- react -app创建了react项目，然后我不得不将它弹出，这样我就可以将它移动到我想要的结构中。
我在弹出的config/pa
浏览 0提问于2017-08-03得票数 0
1回答
我用create-react-app创建了一个全新的React应用程序，现在我想向它添加SASS。
我遵循了的指令。基本上我跑
npm install node-sass --save-dev
然后将这两行添加到我的package.json文件中：
"scripts": {
"build-css": "node-sass src/ -o src/", # Line 1
"watch-css": "npm run build-css && node-sass src/ -o src/ --wa
浏览 1提问于2017-03-14得票数 2
回答已采纳
我想在不导入less的ReactJS应用程序中使用Antd。主要原因是我正在使用create-react-app样板创建我的应用程序。Antd要求我修改webpack.config.js，以编译在任何服务器上部署代码的较少的代码。我不想通过修改node_modules内部的webpack来编写不好的代码，我也没有足够的知识来使用npm弹出。有人能给我建议一个使用Antd和create-react-app的解决方案吗？
浏览 1提问于2020-11-04得票数 2
问题: react的相对初学者，喜欢使用create-react-app而不弹出或配置webpack，并希望实现SASS，最好使用7-1文件夹结构。我想要的是组件的独立样式表，但也有布局等全局样式表等。最重要的是，我想要有SASS变量和混合，我可以在我的所有组件中使用。
我尝试过的: 1) Node-sass-chokidar (在package.json中添加一些脚本，以便在运行npm start时自动运行css-watch，按照github.facebookincubator/create-react-app上的说明。)
Node-sass-chokidar在src目录中查找任何scss文
浏览 3提问于2017-10-03得票数 2
我正在使用create-react-app创建一个react应用程序，并尝试通过执行以下步骤来实现SASS预处理器。所以一切都很顺利，我已经开发了我的应用程序的某些部分。但是由于一个非常奇怪的原因，在开发了2天之后，我在编译时遇到了一个错误，没有任何我能想象到的原因。
{
"status": 1,
"file": "/Users/glenngijsberts/Documents/Development/toggle/src/components/sass/assets.scss",
"line": 2,
"
浏览 5提问于2018-03-07得票数 5
我有一个使用create-react-app创建的react.js项目，我试图通过安装node-sass for react.js在react.js中使用sass。
但我总有个错误说它不相容。
Node Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0
Node Sass版本7.0.0不兼容^4.0.0财政区^5.0.0 \x\x\x ^6.0.0
有什么问题吗？
浏览 4提问于2021-12-20得票数 3
回答已采纳
4回答
有没有人能告诉我是否值得在React中使用Sass/SCSS？
我最终将SCSS设置为在不弹出的情况下使用Create-React-App，但它似乎不能很好地工作，因为建议对每个组件使用CSS模块。
我该如何去共享变量，混合，等等。仅仅使用CSS是不是更好？
任何帮助都将不胜感激。
浏览 1提问于2018-04-17得票数 4
我想在用create-react-app创建的React应用程序中使用。我怎么才能做到这一点而不弹出呢？提示:我也使用，所以涉及到craco的解决方案对我来说也很好。
谢谢!
浏览 5提问于2021-05-15得票数 5
我想在不弹出中继应用程序的情况下使用create-react-app。
根据的说法，我需要babel-relay-plugin。relay-starter-kit在中对此进行配置。
实现这一目标的最简单方法是什么？有没有办法在不弹出的情况下启用relay？
浏览 1提问于2016-11-22得票数 12
未能迁移:从Heroku到Nixpacks的构建包
我需要帮助，我不能做我的前端项目的迁移，它不编译，并给出一个错误。
我的Heroku建筑包：
这个脚本可以正确地在Heroku和Vercel上生成应用程序，但是我不能用Nixpacks包来安装它。有人能告诉我剧本有什么问题吗？
“剧本”：{
"dev"：“react脚本开始”，
“开始”：“服务-s构建”，
“构建”：“反应-脚本构建”，
" test "：“react script test-env=jsdom”，
“弹出”：“反应-脚本弹出”，
"heroku-postbuild"："
浏览 0提问于2022-11-16得票数 0
SASS源地图无法在create app 2 ()上输出，在考虑进行官方修复时，它一直在试图找到解决办法。
另一位用户建议在脚本中添加以下内容：
"scripts": {
"build-css": "node-sass --source-map true --include-path ./src --include-path ./node_modules src/assets/sass -o public/css",
"watch-css": "npm run build-css && no
浏览 0提问于2018-11-23得票数 2
我已经在我的react原生应用程序中使用了SCSS，所以我想在移动设备上使用媒体查询。
我已经使用react-native-sass-transformer插件将scss转换为css。
我的问题是媒体查询没有在react原生应用中应用。
浏览 1提问于2019-07-08得票数 0
我有一个使用Create- React -App的React应用。我在我的应用程序中使用了ES6中包含的Map()数据结构。但是，在IE11中它不起作用。Babel (在Create-React-App的引擎盖下--我没有弹出)不应该处理这个问题吗？
如果没有，有什么解决方案吗？
浏览 14提问于2017-08-04得票数 2
回答已采纳
我使用create- React -app v4.0.1创建了一个基本的react 'hello world‘应用程序
"material-components-web": "^8.0.0",
"node-sass": "^4.14.1",
"react": "^17.0.1",
当我导入Google的material SASS时，我得到以下错误：
./src/app.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!
浏览 1提问于2020-12-12得票数 0
1回答
我有一个用create-react-app创建的应用程序，它使用了react- app -rewired/react-scripts-ts。我的tsconfig有：
baseUrl: "src",
paths: {
"src/*": "./*"
}
在此应用程序的各种文件中，路径解析都很好：
import { MyComponent } from "src/components/MyComponent";
此应用程序已发布，然后导入到另一个应用程序中，该应用程序的package.json具有：
"my-custom
浏览 2提问于2018-10-09得票数 0
1回答
我正在尝试访问公共文件夹中的徽标图像，而我的css文件夹在src中。我还使用了sass，并且我考虑到我们需要编写相对于css文件的路径，而不是sass。
我尝试了不同的方法-有绝对路径，有引号和不带引号-只是希望可能会有一些东西能起作用。
我找到了某人的代码https://codesandbox.io/s/musing-rosalind-21lsd?file=/src/App.js并使用它-我创造了和我一样的条件，它起作用了，但当我回到我的项目时，它不起作用。
我使用的是background-image: url('/logo.swg')，它显示为Error: Can'
浏览 21提问于2021-02-27得票数 0
1回答
我刚用npx create-near-app --frontend="react" near-app-project创建了一个应用程序
然后，我用yarn add sass安装了SASS，如中所述
现在，我收到这样的错误：Uncaught :意外令牌'<'
正如文档中所述，我已经将global.css重命名为global.scss。
我也尝试过用yarn remove sass卸载sass，但是仍然会出现错误。
是什么导致了这个错误？如果附近的应用程序是在ReactJS之上构建的，那么安装sass的步骤也应该是相同的，不是吗？
期待你的帮助。
浏览 2提问于2022-01-10得票数 1
回答已采纳
我使用Airbnb衣棉设置作为我的反应应用程序。
还有这条线
import React from 'react';
给出误差
缺少用于"react“(导入/扩展)的文件扩展名
知道怎么解决这个问题吗？
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.17.1",
"firebase&
浏览 2提问于2017-11-27得票数 4
回答已采纳
因此，使用create-react-app@v1，我曾经编写gulp任务来缩小和编译SASS，这不是实时的，但现在在create-react-app@v2中，Facebook支持node-sass编译并反映实时变化。所以，我的问题是
用节点-sass，我把我的styles.scss放在哪里？
我试着把它放到index.html中，但是它不起作用，所以也许index.js会解决这个问题？
一旦我CRA2 CRA2 npm run build，会在styles.min.css中缩小我的SASS吗？
浏览 0提问于2018-10-26得票数 1
回答已采纳
我有一个主反应应用程序，其中基于选定的服务，我动态地加载另一个反应应用到第二个根目录。我正在加载的第二个应用程序是使用下面的webpack.config捆绑的..。
const path = require("path")
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const glob = require("glob")
module.exports = {
entry: {
"bundle.js": glob.sync("build/
浏览 0提问于2019-07-25得票数 6
回答已采纳
3回答
我想在react JS中设置组件的样式。我尝试了几种方法来做到这一点。当我尝试创建一个CSS对象并将其应用于同一JS文件中的组件时，它就可以工作了。但是当我尝试从外部CSS文件中应用CSS并将其导入到JS文件中时，它不起作用。我还尝试将该文件另存为filename.module.css。但这对我没什么帮助。 已安装的节点模块及其版本列表如下所示。 > @material-ui/core@4.9.11
> @material-ui/icons@4.9.1
> firebase@7.14.1
> react@16.13.1
> react-dom@16.13.1
&
浏览 31提问于2020-04-25得票数 0
回答已采纳
我已经创建了新的React设计项目，使用类型描述，并使用命令：
$ create-react-app my-project --scripts-version=react-scripts-ts-antd
跟随
现在，我想在我的项目中添加对较少模块的支持，而不需要弹出。我试图跟踪多篇关于修改config-overrides.js文件的文章，但没有成功。任何人都可以工作并且可以共享配置吗？
浏览 0提问于2018-07-09得票数 2
回答已采纳
我使用的是react引导
希望自定义reactbootstrap主题，因此请遵循以下说明
https://create-react-app.dev/docs/adding-bootstrap/
因此，我安装了sass，但是安装节点sass(这是不推荐的)仍然会出现错误，如
你知道我做错了什么吗
浏览 5提问于2022-09-02得票数 0
1回答
我不确定，但几个月前这件事做得很好，但现在，它似乎不再起作用了。使用React的create-react-app模块，更新webpack.config.dev.js以测试以下内容：
{
test: /\.(css|scss)$/,
loader: 'style!css?importLoaders=1!postcss!sass'
},
..。使用依赖项node-sass和sass-loader，.scss样式似乎不会被捕获。
有什么想法吗？
浏览 2提问于2017-06-02得票数 0
回答已采纳
我要启动一个react应用程序，我想实现sass作为我的css预处理器，我咨询过的所有资源都建议我仍然使用默认的App.css文件，只是将其重命名为App.scss。但我的问题是，我不想使用默认设置，我想在根目录中的不同目录中设置我自己的sass文件。
浏览 12提问于2020-08-29得票数 0
我有一个问题，当尝试使用react和snowpack设置css模块时。以下是如何重现该问题的方法：
"snowpack": "^2.17.0",
"@snowpack/plugin-sass": "^1.1.1",
使用npx设置新应用程序
npx create-snowpack-app snowpack --template @snowpack/app-template-react-typescript
npm install @snowpack/plugin-sass --save-dev
添加sass文件app.sass
.
浏览 32提问于2020-11-17得票数 3
在我的反应应用程序中修改antd有很大的问题。我绝对不想弹出webpack的config.js文件，因为我绝对不太了解webpack。我不想让我的网站看起来像一个And克隆人。然而，我尝试过许多方法，比如config-override.js。package.json中的主题，这些都没有用！坚果！这是我的package.json：
{
"name": "gui",
"version": "0.1.0",
"private": true,
"dependencies": {
&#
浏览 1提问于2018-09-28得票数 1
回答已采纳
我想在url中获得id，我尝试了两种方法，但是我得到了一个错误，有人能帮助解决这个问题吗？
错误：
错误:无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
您可能有错误匹配的版本的React和渲染器(如React )，您可能正在破坏钩子的规则，您可能在同一个应用程序中有多个React副本(参见
url: http://localhost:8080/passenger-update/16
遵循我的代码：
class PassengerUpdate extends Component {
componentDidMount() {
let {
浏览 3提问于2022-07-07得票数 0
回答已采纳
我想用CSS模块+ SASS构建一个项目。我希望有一些全局样式(混合，变量，函数等)，这将在每个component.module.scss中可用。为此，我需要将全局样式导入到每个模块样式文件中。由于我希望有很多组件，我正在寻找选项来自动完成这一任务。我找到了sass-resourcess-loader，也许能帮上忙。
然而，作为，我与Webpack没有任何经验，我有困难建立它。
我到目前为止所做的：
用create-react-app创建了我的react应用程序
安装的sass-resources-loader节点-sass和
在我的project-folder/node_modu
浏览 2提问于2021-05-31得票数 4
回答已采纳
我希望这对你解决这个问题有帮助:我有一个用下一个配置创建的应用程序：
npx create-react-app my-project
cd my-project
Next i config Sass
npm install sass
# or
yarn add sass
接下来，我通过.css (src/index.css由src/index.scss)更新了我的文件.scss (src/index.css)
下一步，在html中的公用文件夹中添加下一段代码
<style lang="sass">
@import url("src/index.scs
浏览 7提问于2022-08-22得票数 0
2回答
我创建了一个具有Vite的react项目，并且希望使用SASS，我已经安装了它，但是我通常打开一个git和run sass -w sass:css。
有更好的方法吗？我无法理解文档中的解决方案，也无法在线回答。
这是我的package.json
{
"name": "my_first_vite",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite
浏览 8提问于2022-01-25得票数 2
回答已采纳
2回答
Sass不能在create-react-app中编译。当前的package.json结构是
{
"name": "create-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-scripts": "1
浏览 3提问于2018-04-06得票数 3
回答已采纳
1回答
我正在尝试按顺序导入我的css/sass文件。不知何故，当我的bulma框架导入时，我的css变得一团糟，覆盖了后来出现的所有类。
require("./index.scss");
在我的index.scss中，我首先导入bulma (framerwork)，然后是一个entryPoint.scss，它从assets目录导入其他sass/css文件。
@import '~bulma/bulma';
@import 'app/assets/sass/entryPoint.scss';
还有我的entryPoint.scss
@import "
浏览 3提问于2019-01-13得票数 0
我使用的是webcomponents，但没有sass支持。
有一个文件direflow-webpack.js，我可以重写普通的webpack并添加规则。
问题：
在组件文件中，找不到scss模块。import styles from '../../sass/main.scss';。应用程序使用的是typescript，并且build和run进程没有出现错误。
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
浏览 7提问于2020-04-05得票数 3
我有一个想要部署到实例上的create-react-app引导项目。现在，我尝试了两种方法来设置部署，最终只设置了端口，而不是主机。
我的项目架构如下
Project
- Frontend
- Backend
我的主要问题是，尽管我可以在create-react-app构建上设置端口，但我不能将主机名设置为0.0.0.0而不是localhost。
在create-react应用程序中，我在启动脚本中硬编码了HOST=0.0.0.0和PORT=443。
我尝试的另一件事是使用一个脚本在端口443上为页面提供服务。Build在端口443上提供服务，而不是在0.0.0.0上。
Create-reac
浏览 27提问于2019-07-16得票数 8
我需要在我们的web应用程序中添加博客，并使我们的应用程序配置为SEO，因此我正在尝试在我当前的create react应用程序中添加SSR支持。我正在尝试反应水合物和反应渲染方法。在构建应用程序时，我遇到了以下错误。 ERROR in ./src/assets/scss/theme.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/assets/scss/theme.scss)
Module build failed (from ./node_modules/cs
浏览 55提问于2021-04-17得票数 0
我正在尝试构建react应用程序，我想使用scss来设计我的应用程序。
的挑战是，即使我已经安装了node，但仍然会遇到这个错误。
./src/styles/styles.scss (/usr/local/lib/node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!/usr/local/lib/node_modules/react-scripts/node_modules/postcss-loader/src??postcss!/usr/local/lib/node_modules/r
浏览 1提问于2020-04-08得票数 3
3回答
我有一个用create- React -app创建的简单的react应用程序，我想将它部署到Heroku (或其他更容易的地方)并进行密码保护。保护可以非常简单--只需要一个密码就可以了。
我开始研究HTTP基本身份验证，但没有找到一个简单的答案。我找到的最接近的是，但(a)我不喜欢不得不弹出我的应用程序的想法，(b)我无法让它工作。我希望我能找到一个Heroku插件，但也没有运气。
编写一个组件来包装我的应用程序并在显示它之前请求一个密码并不是太难。问题是它是在客户端执行的。我想在服务器端存储正确的密码(或其哈希)，并让应用程序将密码尝试发送到服务器。
由于create-react-app在
浏览 0提问于2018-08-24得票数 13
2回答
我有一个需求，我不确定是否可以使用Rollup (或使用Webpack?)
我已经编写了一个React组件库。每个组件都导入它的样式表。就像这样
import "./button.scss"
export default function Button() {
...
}
现在，这些scss文件使用了我想在全局文件中定义的所有类型的sass变量。我希望我的库的使用者能够像这样导入Button：
import { Button } from "mylib"或者更好：import Button from "mylib/button"，并且只将But
浏览 0提问于2019-07-30得票数 3
所有人。
我是react的新成员，我使用create-reat-app .I创建了我的应用程序，使用了像这样的node-sass-chokidar包。但是我不知道如何启用scss文件的“源地图”。
谢谢你的帮助。
浏览 2提问于2017-05-08得票数 6
1回答
我已经使用CRA (CREATE-REACT-APP)创建了react应用程序。我已经安装了node-sass并将App.css重命名为App.scss，并在App.js中更新了它的导入。现在，在我的App.js中，我只是尝试在一个节中打印一些文本。
node -v v12.11.1和npm -v 6.11.3
App.js
import React from 'react';
import './App.scss';
import Section from 'react-bulma-components/lib/components/sec
浏览 5提问于2019-11-11得票数 2
我有一个带有React JS的网页。站点的结构是MainContent.js --> Main.js -->ReactDOM render。我想在页面打开时弹出模态，所以构建了模态组件Modal.js--> DashModal.js，它在自己的项目上工作，但不是在导入到我的网站时。
我如何正确地导入它，以便像它在自己的项目上一样在加载时具有模态弹出窗口？谢谢。我在下面提供了代码。
**Index JS**
import React from "react";
import ReactDOM from "react-dom";
import Ma
浏览 10提问于2020-06-02得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
