I'd like to not include .babelrc during build since SWC is disabled as a replacement for Babel. I only need .babelrc for a plugin for dev testing purposes that is not supported by SWC yet. I am told to check the doc about ignored compiler options but the page is down, and I could not find a solution from the nextjs document on disabling SWC and its feedback thread.
Super hacky, but you could modify the build script in package.json to temporarily rename the config file before the build then restore it after:
{
"scripts": {
"dev": "next dev",
"build": "mv .babelrc .babel_ && next build; mv .babel_ .babelrc",
"start": "next start",
"lint": "next lint"
}
}
It's not a cross-platform solution, however.
I think you can add .babelrc to .gitignore, and it won't be used during build.
Related
I am not sure what went on, but whenever I wanted to add unit testing to my app, I had to add .babelrc file with just the following code:
{
"presets": [
"es2015",
"next/babel"
]
}
Prior to that, I did not need the file and it was just an nextjs app with semantic. So far, so good. Until I decided to rebuild my semantic-ui theme which turned out to be a massive mistake!
This was what I ran: cd semantic && gulp build
This caused my app to stop working whenever .babelrc is present.
These are my package.json scripts:
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"semantic": "cd semantic && gulp build",
"test": "mocha --require babel-core/register --watch-extensions js **/*.test.js"
},
If I attempt to run the next related scripts, I get the following error:
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/theJuls/Workspace/cbt/client/node_modules/babel-preset-es2015/lib/index.js
If I try to run my unit tests, I get
Error: Plugin 0 specified in "/Users/theJuls/Workspace/cbt/client/node_modules/next/babel.js" provided an invalid property of "default" (While processing preset: "/Users/theJuls/Workspace/cbt/client/node_modules/next/babel.js")
If I remove .babelrc, all the next scripts run normally, however I completely lost my unit tests. Why is this happening? What can I do to fix this?
I am not sure if this is relevant but here is my current file structure:
api/
components/
config/
lib/
pages/
semantic/
store/
.babelrc
package-lock.json
package.json
semantic.json
I am not sure why it suddenly broke, but I have figured out a way around it which is also the more up to date way to do it, as my previous one was deprecated.
First off I had to install the following modules: #babel/core and #babel/register
Changed the .babelrc file to as follows:
{
"presets": [
"#babel/preset-env",
"next/babel"
]
}
Finally, in package.json just slightly change the test command to:
"test": "mocha --require #babel/register --watch-extensions js **/*.test.js"
Since we are now using #babel/register
This made everything come back to normal.
I am using react-script to build and package my application. Each of my react component is using its own less style file and below is the scripts defined in package.json to compile these less file to css files:
"scripts": {
"build-css": "node-less-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-less-chokidar src/ -o src/ --watch --recursive",
"start": "react-scripts start",
"build": "react-scripts build",
"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"
}
the node-less-chokidar will compile each less file to a css file with the same file name. Is there a way for me to compile all less files into one css file. So I just need to import this big css file in my entry.js file. And if there is a different theme for my website, I just need to replace this big css for theme plugins.
I created a brand new React application with create-react-app and now I want to add SASS to it.
I followed the instructions here. Basically I run
npm install node-sass --save-dev
and then added these two lines to my package.json file:
"scripts": {
"build-css": "node-sass src/ -o src/", # Line 1
"watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive", # Line 2
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
This should do the job, according to the documentation, but when I complete the process doing
mv src/App.css src/App.scss
and then
npm run watch-css
the script just won't finish by itself. I always have to use Ctrl-C to finish it and I believe this is not normal.
My questions are:
Is this normal?
Have I missed something?
If so, what have I missed?
You need to transpile the scss to css for this you can use Webpack or Gulp. I will show you an example for Webpack as I prefer this more. Webpack it takes a while to config you can watch tons of internet tutorials.
In order to transpile scss into css you need to write a loader, in Webpack will be something like this:
module: {
loaders: [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(
'style', 'css!sass'
)
},
]
},
This are the packages for the loader, install with npm --S -D sass-loader style-loader into package.json file.
Now in order for Webpack to see the scss files you need to import those files into a js/jsx file for example App.jsx. But to not have a lot of imports you can have a base.scss and you will import other scss fils into it
example import './assets/stylesheets/scss/base.scss';
base.scss contains import to other scss files.
This is just a small introduction to what you must do. You need a little bit more to config Webpack you can search on youtube for that or This github link will help you alot!
Gulp is similar you write tasks, as far as I know there is gulp-scss package.
I'm trying to setup Sass in my Angular 2 project. Basically as I understand there are two ways to create an angular 2 project
1) Using angular-cli (https://github.com/angular/angular-cli)
I referred answer mentioned in https://stackoverflow.com/a/41541042/2868352 & I could successfully use scss files in angular 2 project, everything worked great but I couldn't locate the generated css file from scss file in project folder. Could anyone explain the reason why no css file was generated but still it worked?
2) Using quickstart seed (https://angular.io/guide/quickstart)
I couldn't get any information about how to set up sass in quickstart project. Does anyone have any idea about using sass in the quickstart project provided by angular?
Thanks in advance!
[Check edited part at end of this answer in case you are using angular cli]
Explaining how to use sass in 'quickstart seed'(https://angular.io/guide/quickstart)
(https://angular.io/guide/setup#download)
Please follow these simple steps:
Step 1: Setup the quickstart seed
Use the below commands to setup
npm install
npm start
you will see 'Hello Angular' on browser.
Step 2: Install node-sass and sass-loader
Use the commands mentioned below to install
npm i node-sass -S
npm i sass-loader -S
Now you can see both of these added in your 'dependencies' inside 'package.json' file.
Step 3: Create 2 folders for Sass code and Css code
Create two folders with any name in "quickstart-master" folder. In this case for example:
"sass_folder" and "css_folder". Now create a demo file 'demo.sass' and put it inside 'sass_folder'. You can put a simple sass code in this .sass file. It will look like this:
$font-stack: Helvetica, sans-serif
$primary-color: #000
body
font: 100% $font-stack
color: $primary-color
Step 4: Make changes in 'package.json' file
Add scripts to Build and Watch Sass code present in "sass_folder". After compilation, The resulting css code should be stored in "css_folder". After changes the "Scripts" in 'package.json' file should look like this:
"scripts": {
"build": "tsc -p src/",
"build:watch": "tsc -p src/ -w",
"build:e2e": "tsc -p e2e/",
"serve": "lite-server -c=bs-config.json",
"serve:e2e": "lite-server -c=bs-config.e2e.json",
"prestart": "npm run build",
"start": "concurrently \"npm run build:watch\" \"npm run serve\" \"npm run watch:sass\"",
"pree2e": "npm run build:e2e",
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
"preprotractor": "webdriver-manager update",
"protractor": "protractor protractor.config.js",
"pretest": "npm run build",
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
"pretest:once": "npm run build",
"test:once": "karma start karma.conf.js --single-run",
"lint": "tslint ./src/**/*.ts -t verbose",
"build:sass": "node-sass sass_folder/ -o css_folder",
"watch:sass": "npm run build:sass && node-sass sass_folder/ -wo css_folder/"
}
Have a look at 'start', 'build:sass' and 'watch:sass' only.
Step 5: Run the application
Now you can run the app by using below command:
npm start
You will see the compiled css code in "css_folder" with the same file name 'demo.css'. It will look like this (In this case):
body {
font: 100% Helvetica, sans-serif;
color: #000; }
Now if you make any change in .sass file it will be reflected to .css file dynamically as the script is watching the code.
If it shows error, Close the .css file when you make any change in .sass file.
Note: For scss code you can follow the same steps. You just have to put .scss file in "sass_folder" in this case.
[edited]
In case you want to use Angular CLI:
At the time of creation of new Angular project use below mentioned cmnds:
For sass:
ng new Demo_Project --style=sass
For scss:
ng new Demo_Project --style=scss
To change the existing style:
ng set defaults.styleExt scss
After this you can use Cli normally.
I can explain you the first one.
If you are using ng serverthe compiled files are saved in a hidden folder in your project.
If you are using ng build, you can see your compiled files in the /dist folder. In this folder you can found your general styles in the file styles.[hashversion].css, but local component styles are included inside main.[hashversion].js by Webpack.
Angular-cli uses webpack, and if you want to learn more about, see Webpack Docs
UPDATE
In the second case, you have to compile sass manually. In the app folder un have a app.component.ts that will be compiled in the same folder to app.component.js by Typescript Compiler. So you have to do the same with sass.
Import the CSS file in the component.
#Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`,
stylesUrl: ['app/app.component.css']
})
export class AppComponent { name = 'Angular'; }
Noticed that you cannot use relative path cause everything will be requested from root directory.
Create an app.component.sass and put your styles inside.
Then execute the sass compiler that compiles the app.component.sass to app.component.css
Run the server and it will work.
There are two main scenarios here.
When creating a new Angular CLI project, use CLI command
ng new my-angular-app --style=scss
When an Angular CLI project has already been set up, use CLI command
ng set default.styleExt scss
In case 2, you need to manually convert existing .css files. You can use also use sass or less instead of scss
Check out the full article here.
Using SCSS/SASS/LESS in Angular CLI Project
I made a folder g in root(C:/) in where I try to install Grunt via npm.
I sucessfull made: npm install -g grunt-cli.
I configured package.json to this:
{
"name": "testing",
"version": "0.0.0",
"dependencies": {
"grunt": "~0.4.5" },
"description": "testing",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5"
}
}
So good so far.
BUT: When I try to install Grunt: npm install grunt --save-dev and modules(plugins) then I run into this error: npm WARN package.json testing#0.0.0 No repository field...
I use GitHub where I've forked Grunt and Grunticon.
Then I can't succed with nothing towards installing Grunt...
Any good clues and help in solving this?
Okay, I think I see the problem clearly now. Here are some instructions for getting Grunt running, try to follow these exactly, do not create any other folders as it could cause issues for Grunt or Node.
Create a folder for your project, this can be anywhere on your system.
Save the file you have above as package.json in that folder.
Now install the global Grunt CLI
~$ npm install -g grunt-cli <-- Note this is "grunt-cli" NOT "grunt"
Then go to the new directory you created and run this command:
~/new-directoty$ npm install
This will install the Grunt runtime locally for your project because it is specified in package.json
Create a very simple config file in the new directory and name it Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({ /* your config will go in here */ });
/* multi-task definitions go here */
};
Now try to run Grunt just to test that it works:
~/new-directory$ grunt
After that you are ready to start adding plugins, but that's a bigger topic. Good luck.