Synto comes with power of SCSS. The css files can be generated from scss by simply following below steps:
Webpack is an open-source JavaScript module bundler. It is a popular tool in the web development ecosystem for bundling and managing assets such as JavaScript, CSS, and images for web applications. Webpack allows developers to define a dependency graph of their application, including all the modules and assets required, and then it bundles these resources into one or more optimized files for deployment. Using Webpack you can perform tasks like running a local server, minifying code, compilation, optimizing images, etc... We are using webpack which allows to having complete automation for build flow. You can read it more about it here.
Please follow below steps to install and setup all prerequisites:
Make sure to have the Node.js installed & running in your computer. If you have already installed nodejs on your computer, you can skip this step, otherwise install nodejs on your computer,
Note : If you are using the latest version of Node JS or want to install and use the latest version, click here and install all the dependencies manually that are given below in command prompt.
Make sure to have the webpack
installed &
running in your computer. If you have already installed webpack on your
computer, you can skip
this step. In order to install, just run command
npm install --save-dev webpack from
your terminal.
After Completion of webpack Install. open webpack.config.js And install
the "Declaration of webpack variables" in your command promt. In order to
install, just run command
npm install webpack,
npm install webpack-cli,
npm install webpack-dev-server,
npm install style-loader,
npm install sass-loader,
npm install css-loader,
npm install postcss-loader,
npm install mini-css-extract-plugin,
from your terminal.
Make sure to have all above prerequisites installed & running in your
computer. If you want to install more variables for your template, just
declare the variables in webpack.config.js after that run in command
promt
here how the webpack.config.js look like
import path from 'path';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import tailwindcss from "tailwindcss"
import autoprefixer from "autoprefixer"
export default {
mode: 'development',
entry: './src/assets/scss/style.scss',
output: {
path: path.resolve('./src/assets/css'),
filename: 'style.js',
},
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
ident: 'postcss',
plugins: [tailwindcss, autoprefixer],
},
},
},
'sass-loader', // Compile SCSS to CSS
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
linkType: "text/css",
filename: 'style.css', // Specify the name for the extracted CSS file
}),
],
watch: true,
devtool: 'source-map',
};path and MiniCssExtractPlugin are imported from their respective modules.
path is a built-in Node.js module for working with file and directory paths,
and MiniCssExtractPlugin is a plugin for extracting CSS into separate files.
This is an object representing the Webpack configuration.
The mode is set to 'development'. This indicates that the configuration is intended for development purposes, which means it may include source maps and other tools that help in debugging.
The entry point for the application is set to `'./src/assets/scss/style.scss'. This is where Webpack will start bundling and processing your assets.
Configuration for the output bundled files.
path specifies the output directory where the bundled files will be placed, and it's set to ./src/assets/css/.
filename is set to 'bundle.js', which is a common naming convention for the JavaScript bundle, although in this case, it's slightly misleading since this configuration primarily deals with CSS.
The module object defines how different types of files are processed. In this case, it's set up to handle SCSS files.
The test property specifies that files with a .scss extension should be processed.
The use array specifies the loaders to be used in processing these files. The order of loaders is important, and it starts with MiniCssExtractPlugin.loader, followed by css-loader and sass-loader. These loaders are used to convert SCSS into CSS and extract it into a separate file.
The plugins array contains a single instance of MiniCssExtractPlugin. This plugin is responsible for extracting the compiled CSS from the SCSS files and saving it in a file named 'style.css' in the output directory.
The watch option is set to true, which means Webpack will watch for changes in the source files and automatically recompile when changes are detected. This is useful for development, as it provides automatic feedback as you work on your project.
| Command | Description |
|---|---|
npm install
|
npm install command is used to intall required dependencies to run webpack in node_modules
|
npx webpack --watch
|
this command is used to generate css files in to the css folder directory. (src/assets/css/)
webpack runs the project locally, starts the development server and watches for
any changes you made in src folder, including your code,
SCSS, etc. What ever changes you made in src folder it automatically
changed in root files.
|