[英]sass not working in create-react-app
Sass does not compiling in create-react-app. Sass不会在create-react-app中进行编译。 The current package.json structure is 当前的package.json结构为
{
"name": "create-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-scripts": "1.1.4"
},
"dependencies": {
"node-sass-chokidar": "^1.2.2",
"npm-run-all": "^4.1.2",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-scripts": "^1.1.4",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0"
},
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Repo: https://github.com/athimannil/create-app 回购: https : //github.com/athimannil/create-app
It is working fine, npm start
watch your .scss
files and output .css
files as expected. 它工作正常, npm start
监视您的.scss
文件并按预期输出.css
文件。
Make sure to require the .css
files in your components. 确保在组件中需要.css
文件。
Since
src/App.js
still importssrc/App.css
, the styles become a part of your application. 由于src/App.js
仍导入src/App.css
,因此样式成为您应用程序的一部分。 You can now editsrc/App.scss
, andsrc/App.css
will be regenerated. 现在,您可以编辑src/App.scss
,并且src/App.css
将重新生成。
Also since .css
files are now generated, you should remove them from your SCM. 同样,由于现在已经生成.css
文件,因此您应该将它们从SCM中删除。
At this point you might want to remove all CSS files from the source control, and add
src/**/*.css
to your.gitignore
file. 此时,您可能需要从源代码管理中删除所有CSS文件,并将src/**/*.css
.gitignore
添加到您的.gitignore
文件中。
The 2. version of create-react-app supports Sass now. 2.版本的create-react-app现在支持Sass。 Install node-sass (eg npm install node-sass) to enable it. 安装node-sass(例如npm install node-sass)以启用它。 Checkout this application's Navigation component . 检出此应用程序的导航组件 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.