Your location:Tech News>News>Script>Sass used in the create-react-app exemplary method

Latest News

Sass used in the create-react-app exemplary method



  Sass (English name: Syntactically Awesome Stylesheets) is a originally designed by Hampton Catlin by Natalie Weizenbaum developed Cascading Style Sheet Language.Sass is a script to parse CSS scripting language that is SassScript.Sass including two sets of grammar.The beginning of the syntax called "grammar indentation", and the like Haml using indentation to distinguish the code blocks, and the carriage with different rules spaced.The newer syntax is called "SCSS", using the same block and CSS syntax, that the use of braces to separate different rules, use a semicolon to separate the specific style.Under normal circumstances, these two sets of grammar by.sass and.Scss two separate file extension area.I believe that every front-end developers have heard this css preprocessor.

  Whether you are a beginner or Reactjs Reactjs old driver, you must have heard of create-react-app this scaffolding, and from official documents create-react-app, we can see that they are not yet directly support importing LESS or Sass.But through some configuration, we can use sass / scss / less from the official scaffolding.

  1, mounted to a node-sass-chokidar dependent

  npm install --save node-sass-chokidar

  2, the installation node-sass

  npm install node-sass

  3, package in the project.json, the downlink will be added to the scripts:

  "Build-css": "node-sass-chokidar src / -o src /",

  "Watch-css": "npm run build-css && node-sass-chokidar src / -o src / --watch --recursive",

  4, using

  Creating xx.scss file, or to initialize the project src / App.css rename src / App.scss, running in a terminal

  npm run watch-css

  watch-css Sass will find every file in the src subdirectory, and create a corresponding CSS file in its next

  5, and compile and run the project sass

  (1) open two terminals, a terminal performs npm start running program, the terminal performs another npm run watch-css compiling synchronizes

  (2) using the tool npm-run-all performed npm install npm-run-all --save-dev installed, project in the Package.json, the downlink will be added to the scripts:

  "Run-double": "npm-run-all -p watch-css start"

  In the terminal performs npm run run-double, and the project can be run simultaneously compile sass

  * Note: "run-double" This name can be changed to your favorite name

  6, it is recommended

  Change the create-react-app webpack configuration, it is generally used to react-app-rewired treated

  That''s all for this article, I want to be helpful to learn, I hope you will support script Home.

  You may also be interested in the article: Detailed use create-react-app add css modules, sasss and antd

Recommend article

Relate article