[英]create-react-app with sass not loading styles
I'm trying to add sass/scss support to create-react-app .我正在尝试为create-react-app添加 sass/scss 支持。
So I did these steps:所以我做了这些步骤:
npm eject
npm install sass-loader node-sass --save-dev
Opned the webpack.config.dev.js file and added this to loaders section:打开 webpack.config.dev.js 文件并将其添加到加载程序部分:
{ test: /\\.scss$/, loaders: ["style", "css", "sass"] },
In my app.js file i reference an scss file: import './css/app.scss';
在我的 app.js 文件中,我引用了一个 scss 文件:
import './css/app.scss';
When i run npm start
everything compiles with no errors but the application loads with no styling.当我运行
npm start
一切都编译没有错误,但应用程序加载时没有样式。
What am i missing?我错过了什么?
I just went through this, and seems that there are lot of people lost or not finding the right answer.我刚刚经历了这个,似乎有很多人迷失或找不到正确的答案。 This is what I did:
这就是我所做的:
npm run eject
Running this command will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project, as you noted all that was inside a npm module called react-script.运行此命令会将所有配置文件和可传递依赖项(Webpack、Babel、ESLint 等)复制到您的项目中,正如您注意到的,所有这些都在名为 react-script 的 npm 模块中。 Do not modify this package directly!
不要直接修改这个包!
npm install sass-loader node-sass --save-dev
At this point you have to install the sass compiler and the webpack loader as development dependencies.此时你必须安装 sass 编译器和 webpack 加载器作为开发依赖项。
config\\webpack.config.dev.js
.config\\webpack.config.dev.js
。 Add /\\.scss$/,
to the exclude array in the url loader, it will look something like this after the update:将
/\\.scss$/,
添加到 url 加载器中的 exclude 数组,更新后将如下所示:
exclude: [ /\\.html$/, /\\.(js|jsx)$/, /\\.css$/, /\\.json$/, /\\.svg$/, /\\.scss$/, //Add this line ],
Add the SASS/SCSS loader:添加 SASS/SCSS 加载器:
{ test: /\\.scss$/, loaders: ['style', 'css', 'sass'] },
Step 1:第1步:
npm run eject
Now the config files will be shown in the project folder现在配置文件将显示在项目文件夹中
Step 2: Install sass compiler and webpack loader第二步:安装sass编译器和webpack加载器
npm install sass-loader node-sass --save-dev
In config\\webpack.config.dev.js add /.scss$/ to the exclude array在config\\webpack.config.dev.js 中添加/.scss$/到排除数组
Step 3: Add below loader in the rules array (should be added before file-loader)第三步:在规则数组中添加下面的loader(应该在file-loader之前添加)
{
test: /\.scss$/,
loaders: [
require.resolve('style-loader'),
require.resolve('css-loader'),
require.resolve('sass-loader')
]
}
And start your application.并启动您的应用程序。
You can rename your existing css files to scss and work您可以将现有的 css 文件重命名为 scss 并工作
I was stuck with the same problem reading it's documentations .我在阅读它的文档时遇到了同样的问题。
Unitl I found that the README.md file inside the created project with create-react-app has documented it in another way and it worked. Unitl 我发现使用 create-react-app 创建的项目中的 README.md 文件以另一种方式记录了它并且它有效。 I think relying on that readme file ( that is shipped with your created project ) is better option.
我认为依靠自述文件(随您创建的项目一起提供)是更好的选择。
{ test: /\\.scss$/, loaders: ['style', 'css', 'sass','scss'] //add 'scss' },
Koala is a sass, less etc.. compiler. Koala是一个 sass、less 等编译器。 You can use any tools of your choice for this.
为此,您可以使用您选择的任何工具。
Add the source folder containing all your SCSS files to Koala.将包含所有 SCSS 文件的源文件夹添加到 Koala。 It will monitor for any modification to your Sass files and generate the compiled CSS version instantly.
它将监视对您的 Sass 文件的任何修改,并立即生成已编译的 CSS 版本。
Use the CSS file generated by Koala directly your project.直接在你的项目中使用 Koala 生成的 CSS 文件。
import './style.css';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.