Looking for a little explanation.
I added .scss support to my create-react-app and every thing works (like in docs: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc).
There is these lines with plus sign:
"scripts": {
+ "build-css": "node-sass-chokidar src/ -o src/",
+ "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
My first question is what first src/ and second src/ stands for?
In this approach it creates .css file next to .scss. My second question is how to make one .css, no matter how many .scss files I have.
The first and second /src are the paths of the input and output, something like source and destination of your files, you only want to read .scss files inside your /src folders and the result is built inside that same /src folder.
You can prepend an underscore(_) to your SCSS files and this will tell SASS that those files will have no file output when compiled, so if for example you have a file named navBar.scss you should change it to _navbar.scss. Make sure you are importing those files from some other .scss file that doesn't have an underscore though, otherwise the compiler task will do nothing with those files.
To import the files you don't have to specify the underscore, but you do have to put the exact route of the files for example to import your _navbar.scss:
#import 'route/to/components/navbar/navbar'
The first src/ is where it is reading files from, then -o designates output, and the second src/ is the output directory, which is why it is creating the new files in the same location as the source files.
For single file output try node-sass-chokidar src/ -o src/outputfile.css
Related
I am developing in a monorepo. In our team, we have two different eslint configurations... one for the frontend and another one for the backend.
Our project structure is:
/
app/
components/
SomeComponent/
XD.js
App.js
assets/
core/
functions/ <--- Backend
src/
node_modules/
.eslintignore
.eslintrc.js
package.json
node_modules/
.eslintignore
.eslintrc.js
Main.js
package.json
Our top level .eslintignore (not the one in the backend) looks like the following:
node_modules/
core/
functions/
With this, we are trying to ignore the files that are inside these directories when executing the linting script which is situated in our package.json (again, not the one inside the backend folder).
This is the script I have in my package.json
"lint": "eslint *.js ./app/**/*.js"
The problem I am expecting is that my editor detects the linting errors... but when running
yarn lint
I get
$ eslint .js ./app/**/.js ✨ Done in 5.27s.
It seems that the script is not linting all the files... why?
Note:
When changing the script to:
eslint . --ext .js,.jsx,.cjs,.mjs
it works.
To use the ES modules for esri JS Api 4.18 requires ncp copy of node_modules for BUILD and START. what and where do I need to copy assets for working in storybook.js?
Copy assets
You will need to copy the API’s assets, which includes styles, images, fonts, and localization files, from the #arcgis/core/assets folder to your build folder. A simple way to accomplish this is to configure an NPM script that runs during your build process. For example, use npm to install ncp and configure a script in package.json to copy the folder. Here’s a React example:
// package.json
{
"script": {
"start": "npm run copy && react-scripts start",
"build": "npm run copy && react-scripts build",
"copy": "ncp ./node_modules/#arcgis/core/assets ./public/assets"
}
}
https://developers.arcgis.com/javascript/latest/es-modules/
ok so turns out it is pretty easy. You need to ncp copy your asset files to a common directory in your project and you need to reference it in your storybook script.
{
"scripts": {
"start-storybook": "npm run copy && start-storybook -s ./public -p 9001"
"copy": "ncp ./node_modules/#arcgis/core/assets ./public/assets"
}
}
https://storybook.js.org/docs/react/configure/images-and-assets
When I do: npm run build I would like to create a folder inside the build folder and move all build output inside that folder.
At this moment I'm doing this:
"prebuild": "npm run build:clean",
"build": "react-scripts build",
"postbuild": "mkdir dest && cp -r build/* dest && npm run build:clean && mv dest build",
"build:clean": "rimraf build/*",
Clear build folder
Build app
Create dest folder
Copy all that is inside in build folder in dest folder
Clear build folder
Move dest folder inside build folder
How can I reduce it?
Simple answer is: you can't change it.
Build output is fixed in create-react-app and can't be changed, and this decision has its roots in philosophy of CRA.
Citing Dan Abramov, co-author of create-react-app:
I don’t think it is strange this feature is missing. Largely, it is intentional. It ensures most people have similar setups, and people can build tools (e.g. for deployment) assuming the same directory structure.
However, you can use trick backed-up by him, which is using mv to move build output:
"build": "react-scripts build && mv build {YOUR_PATH}"
I have the below folder structure
-src
--module
---some.js
---another.js
--server.js
I am using parceljs transpile the .js files
The script in package.json looks like this
"build": "parcel src/*/*.js --target=node"
When I run npm run build, server.js is not transpiled.
If I change the build script to the below, files in module folder don't get transpiled
"build": "parcel src/*.js --target=node"
Any guidance so what I could transpile .js files in the src level as well as all nested files?
You could run the both commands in a single line, using the logical operator &&:
"build": "parcel src/*.js --target=node && parcel src/*/*.js --target=node"
as per #Jeremy' suggestion
parcel src/**/*.js --target=node
I have this project structure:
src
--assets
----css
----sass
------main.scss
------_variables.scss
I am trying to write an npm script that will watch for changes in all of my scss files (including partials), and then only compile my main.scss file. So far nothing happens when I change my partial files until I save main.scss. What am I doing wrong?
my scripts:
"scripts" : {
"sass": "node-sass src/assets/**/*.scss src/assets/css/*.css",
"sass:watch": "npm run sass -- --watch"
}