Create React WebPack Babel Structure App Manually add css & sass 2/2
On the first part we created a structure app for react, webpack, babel and now let's add css and sass.
install the css-loader and style-loader
npm install --save-dev style-loader css-loader{
"name": "react-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.15.0",
"@babel/preset-env": "^7.15.0",
"@babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"css-loader": "^6.2.0",
"style-loader": "^3.2.1",
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
modify the webpack.config.js file to add the rule into the array of objects, accord the webpack page instrutions
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env","@babel/preset-react"]
}
}
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
}
]
}
};
run the aplication with the script in package.json previosly created
npm run build
now we need to create the styles.css file and import it in index.js defining css instructions in this case the background color
src/css/styles.css file
body {
background: green;
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './css/styles.css';
ReactDOM.render(<h1>Test React Webpack Babel css configuration.</h1>,
document.getElementById('root'));
console.log('Config Webpack OK!');
When open the index.html file, we observe the text and the background green.
Now add the sass, following the page instructions
Now install the sass-loader and sass, stop the previous running script with ctrl+C, and install sass
npm install sass-loader sass --save-dev{
"name": "react-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.15.0",
"@babel/preset-env": "^7.15.0",
"@babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"css-loader": "^6.2.0",
"sass": "^1.38.2",
"sass-loader": "^12.1.0",
"style-loader": "^3.2.1",
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
modify the webpack.config.js to add the rules for sass, remove the css rule.
webpack.config.js file
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env","@babel/preset-react"]
}
}
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
}
]
}
};
And now, we need to change the sytle.css file to style.scss and the import in index.js
index.js file importing the scss file
import React from 'react';
import ReactDOM from 'react-dom';
import './css/styles.scss';
ReactDOM.render(<h1>Test React Webpack Babel scss configuration.</h1>,
document.getElementById('root'));
console.log('Config Webpack OK!');
Just change the color in style.scss to check the modification is ok. and run the script again
npm run build
The file can be scss extention or sass, as are defined on the test rule of the webpack.config.js
eot
No hay comentarios:
Publicar un comentario