Related
In my project, I'm using the reanimate library to add animations, but I'm receiving an error
https://stackoverflow.com/questions/63005011/support-for-the-experimental-syntax-jsx-isnt-currently-enabled
I follow all the steps mention in the link but none of them work for me
My package.json file
{
"name": "animation",
"version": "0.1.0",
"private": true,
"dependencies": {
"#react-spring/native": "^9.6.1",
"#react-spring/web": "^9.6.1",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"babel-polyfill": "^6.26.0",
"lodash": "^4.17.21",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-native-reanimated": "^2.14.4",
"react-native-web": "^0.18.10",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/plugin-syntax-jsx": "^7.18.6",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^9.1.2",
"url-loader": "^4.1.1",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
}
}
webpack.config.js
// web/webpack.config.js
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const appDirectory = path.resolve(__dirname, "../");
// This is needed for webpack to compile JavaScript.
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// `node_module`.
const babelLoaderConfiguration = {
test: /\.js$/,
// Add every directory that needs to be compiled by Babel during the build.
include: [
path.resolve(appDirectory, "index.web.js"),
path.resolve(appDirectory, "src"),
path.resolve(appDirectory, "node_modules/react-native-uncompiled"),
],
use: {
loader: "babel-loader",
options: {
cacheDirectory: true,
// The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
presets: [
"#babel/preset-react",
"module:metro-react-native-babel-preset",
],
// Re-write paths to import only the modules needed by the app
plugins: [
"#babel/plugin-syntax-jsx",
"react-native-web",
"react-native-reanimated/plugin",
],
},
},
};
// This is needed for webpack to import static images in JavaScript files.
const imageLoaderConfiguration = {
test: /\.(gif|jpe?g|png|svg)$/,
use: {
loader: "url-loader",
options: {
name: "[name].[ext]",
esModule: false,
},
},
};
module.exports = {
entry: [
// load any web API polyfills
path.resolve(appDirectory, "polyfills-web.js"),
// your web-specific entry file
path.resolve(appDirectory, "index.web.js"),
],
// configures where the build ends up
output: {
filename: "bundle.web.js",
path: path.resolve(appDirectory, "dist"),
},
// ...the rest of your config
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: "./index.html",
}),
new webpack.EnvironmentPlugin({ JEST_WORKER_ID: null }),
new webpack.DefinePlugin({ process: { env: {} } }),
],
module: {
rules: [babelLoaderConfiguration, imageLoaderConfiguration],
},
resolve: {
// This will only alias the exact import "react-native"
alias: {
"react-native$": "react-native-web",
},
// If you're working on a multi-platform React Native app, web-specific
// module implementations should be written in files using the extension
// `.web.js`.
extensions: [".web.js", ".js"],
},
};
I'm using Webpack 5 and Angular 11
when I execute the command
ng build --prod && ng run test-app:server:production
In the console it gives me an error message:
Error: ./node_modules/msnodesqlv8/build/Release/sqlserverv8.node 1:2
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
and directory is not being built: dist/test-app/server/main.js it only creates itself: dist/test-app/browser/
I don't know where I have badly configured files.
Please help. I don't know what I'm doing wrong.
package.json:
{
"name": "test-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"dev:ssr": "ng run test-app:serve-ssr",
"serve:ssr": "node dist/test-app/server/main.js",
"build:ssr": "ng build --prod && ng run test-app:server:production",
"prerender": "ng run test-app:prerender",
"start-webpack:server": "webpack --config webpack.server.config.js "
},
"private": true,
"resolution": {
"webpack": "^5.0.0"
},
"dependencies": {
"#angular/animations": "~11.0.5",
"#angular/common": "~11.0.5",
"#angular/compiler": "~11.0.5",
"#angular/core": "~11.0.5",
"#angular/forms": "~11.0.5",
"#angular/platform-browser": "~11.0.5",
"#angular/platform-browser-dynamic": "~11.0.5",
"#angular/platform-server": "^11.0.7",
"#angular/router": "~11.0.5",
"#nguniversal/express-engine": "^11.0.1",
"express": "^4.17.1",
"msnodesqlv8": "^2.0.8",
"mssql": "^6.3.1",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.1100.5",
"#angular/cli": "~11.0.5",
"#angular/compiler-cli": "~11.0.5",
"#nguniversal/builders": "^11.0.1",
"#types/express": "^4.17.9",
"#types/jasmine": "~3.6.0",
"#types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.1.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-loader": "^8.0.14",
"ts-node": "^8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2",
"webpack-cli": "^4.3.1"
},
"description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.0.5.",
"main": "karma.conf.js",
"keywords": [],
"author": "",
"license": "ISC"
}
angular.json:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"test-app": {
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
},
"#schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/test-app/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "test-app:build"
},
"configurations": {
"production": {
"browserTarget": "test-app:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "test-app:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json",
"tsconfig.server.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "test-app:serve"
},
"configurations": {
"production": {
"devServerTarget": "test-app:serve:production"
}
}
},
"server": {
"builder": "#angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/test-app/server",
"main": "server.ts",
"tsConfig": "tsconfig.server.json"
},
"configurations": {
"production": {
"outputHashing": "media",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"sourceMap": false,
"optimization": true
}
}
},
"serve-ssr": {
"builder": "#nguniversal/builders:ssr-dev-server",
"options": {
"browserTarget": "test-app:build",
"serverTarget": "test-app:server"
},
"configurations": {
"production": {
"browserTarget": "test-app:build:production",
"serverTarget": "test-app:server:production"
}
}
},
"prerender": {
"builder": "#nguniversal/builders:prerender",
"options": {
"browserTarget": "test-app:build:production",
"serverTarget": "test-app:server:production",
"routes": [
"/"
]
},
"configurations": {
"production": {}
}
}
}
}
},
"defaultProject": "test-app",
"cli": {
"analytics": "e9a52f4c-af8d-4030-8d24-ba3f4b17ec39"
}
}
server.ts:
import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '#nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '#angular/common';
import { existsSync } from 'fs';
import { TestRoute } from './server/router/test';
const testRoute: TestRoute = new TestRoute();
export function app(): express.Express {
const server = express();
const distFolder = join(process.cwd(), 'dist/test-app/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
server.engine('html', ngExpressEngine({
bootstrap: AppServerModule,
}));
server.set('view engine', 'html');
server.set('views', distFolder);
server.get('*.*', express.static(distFolder, {
maxAge: '1y'
}));
server.get('*', (req, res) => {
res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});
return server;
}
function run(): void {
const port = process.env.PORT || 4000;
const server = app();
server.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}
// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
run();
}
export * from './src/main.server';
commented out on this line of code:
const testRoute: TestRoute = new TestRoute();
and execute the command
ng build --prod && ng run test-app: server: production
does not display errors.
The TestRoute class contains a reference to the library and connecting to the database:
import { Request, Response, NextFunction, response } from 'express';
export class TestRoute {
contractorRoute(app: any): void {
app.route('/api/get-test').get((req: Request, res: Response, next: NextFunction) => {
var sql = require("mssql/msnodesqlv8");
let config = {
server: 'SQLDXXX\\XXX',
database: 'XXX',
driver: "msnodesqlv8",
options: {
trustedConnection: true
}
};
let connect = new sql.ConnectionPool(config);
connect.connect().then(() => {
connect.request().query('select * from [test].[dbo].[test]', (err: TypeError, recordset: any) => {
if (err) {
console.error(" Error: " + err );
return;
} else {
res.send(recordset);
}
connect.close();
})
}).catch((err: any) => {
console.error(" Error: " + err );
});
})
}
}
tsconfig.app.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": [
"node"
]
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"module": "es2020",
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
tsconfig.server.json
{
"extends": "./tsconfig.app.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"target": "es2020",
"module": "commonjs",
"types": [
"node"
]
},
"files": [
"src/main.server.ts",
"server.ts"
],
"angularCompilerOptions": {
"entryModule": "./src/app/app.server.module#AppServerModule"
}
}
webpack.server.config.js
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: { server: "./server.ts" },
resolve: { extensions: [".js", ".ts"] },
target: "node",
mode: "none",
// this makes sure we include node_modules and other 3rd party libraries
externals: [/node_modules/],
output: {
path: path.join(__dirname, "dist"),
filename: "[name].js"
},
module: {
rules: [
{ test: /\.ts$/, loader: "ts-loader" },
{ test: /\.node$/, use: "node-loader" },
]
},
plugins: [
// Temporary Fix for issue: https://github.com/angular/angular/issues/11580
// for 'WARNING Critical dependency: the request of a dependency is an expression'
new webpack.ContextReplacementPlugin(
/(.+)?angular(\\|\/)core(.+)?/,
path.join(__dirname, "src"), // location of your src
{} // a map of your routes
),
new webpack.ContextReplacementPlugin(
/(.+)?express(\\|\/)(.+)?/,
path.join(__dirname, "src"),
{}
)
]
};
the documentation https://www.npmjs.com/package/msnodesqlv8 says about adding a line I added it:
{ test: /\.node$/, use: 'node-loader' }
but the error is still there:
Error: ./node_modules/msnodesqlv8/build/Release/sqlserverv8.node 1:2
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
I don't know what else I should improve.
Thank you for your help
the application example is based on:
https://www.ganatan.com/tutorials/server-side-rendering-with-angular-universal
I am developing an app using nativescript and angular 11.0. For initial startup creating a login screen. Facing issues while running the application. Get the below exception. The issue happens only when routing is enabled in the module.
ERROR in ./app/login/login.component.ts
Module not found: Error: Can't resolve '#nativescript/angular/router' in 'D:\Mobile_dev\ns-ng-quiz\app-ns-ng\src\app\login'
# ./app/login/login.component.ts 3:0-64 5:0-51 40:113-132 78:38-57
# ./app/app.module.ts
# ./main.ts
ng update says everything is in order. Deleting node_modules folder and a fresh npm install did not help either.
Here is my package.json
{
"name": "#nativescript/template-hello-world-ng",
"main": "main.js",
"version": "7.0.8",
"author": "NativeScript Team <oss#nativescript.org>",
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"publishConfig": {
"access": "public"
},
"keywords": [
"nativescript",
"mobile",
"angular",
"{N}",
"template"
],
"repository": {
"type": "git",
"url": "<fill-your-repository-here>"
},
"bugs": {
"url": "https://github.com/NativeScript/NativeScript/issues"
},
"dependencies": {
"#angular/animations": "~11.0.0",
"#angular/common": "~11.0.0",
"#angular/compiler": "~11.0.0",
"#angular/core": "~11.0.0",
"#angular/forms": "~11.0.0",
"#angular/platform-browser": "~11.0.0",
"#angular/platform-browser-dynamic": "~11.0.0",
"#angular/router": "~11.0.0",
"#nativescript/angular": "~11.0.0",
"#nativescript/core": "~7.0.0",
"#nativescript/theme": "~3.0.0",
"reflect-metadata": "~0.1.12",
"rxjs": "^6.6.0",
"zone.js": "~0.11.1"
},
"devDependencies": {
"#angular/compiler-cli": "~11.0.0",
"#nativescript/android": "7.0.1",
"#nativescript/types": "~7.0.0",
"#nativescript/webpack": "~3.0.0",
"#ngtools/webpack": "~11.0.0",
"typescript": "~4.0.0"
},
"private": "true",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}
}
Here is my app-routing.module.ts
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { NgModule } from "#angular/core";
import { Routes } from "#angular/router";
import { NativeScriptRouterModule } from "#nativescript/angular";
import { ItemsComponent } from "./item/items.component";
import { ItemDetailComponent } from "./item/item-detail.component";
const routes: Routes = [
{path: "", redirectTo: "/login", pathMatch: "full" },
{path:"login", component:LoginComponent},
{path:"home", component:HomeComponent}
//{ path: "", redirectTo: "/items", pathMatch: "full" },
// { path: "items", component: ItemsComponent },
// { path: "item/:id", component: ItemDetailComponent }
];
#NgModule({
imports: [NativeScriptRouterModule.forRoot(routes,{
enableTracing:true
})],
exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }
Project Structure in VSCode
You should be able to import both RouterExtensions for navigation and NativeScriptRouterModule in the module from #nativescript/angular instead of the previous #nativescript/angular/router path.
import { RouterExtensions } from '#nativescript/angular'
I am trying to compile my ES6+ code to vanilla js using Grunt task runner.
I have purposely chosen Grunt over webpack and gulp because I just wanted to minify my js files.
I have successfully compiled my ES6 code to vanilla after running the code got an error saying generatorRuntime is not defined. After analysing the issue I could that my async and await code is giving the issue after it gets converted to vanilla js.
I have my code snippet of my gruntfile.js and package.json.
babel: {
options: {
sourceMap: true
},
dist: {
files: [{
"expand": true,
"cwd": "./htdocs/js/src",
"src": ["**/*.js"],
"dest": "./htdocs/js/compiled/",
"ext": ".js"
}]
}
},
//uglify will minify all the js files in js/src folder.
uglify: {
all_src : {
options : {
sourceMap : true
},
files: [{
expand: true,
flatten: true,
cwd:'./htdocs/js/compiled',
src: '**/*.js',
dest: './htdocs/js/dist',
ext: '.min.js'
}]
}
}
grunt.loadNpmTasks('grunt-babel');
grunt.loadNpmTasks('grunt-contrib-uglify');
Package.json
"devDependencies": {
"babel-core": "^6.26.3",
"babel-preset-latest": "^6.24.1",
"grunt": "^1.1.0",
"grunt-babel": "^7.0.0",
"grunt-cli": "^1.3.2",
"grunt-contrib-uglify": "^4.0.1"
},
"babel": {
"presets": [
"latest"
]
}
That's probably because the polyfills aren't getting shipped in your bundle. In your babel.options object inside Gruntfile, you can set
presets: [['#babel/preset-env', { useBuiltIns: 'usage', corejs: 3 }]]
and don't forget to include corejs as dependency in your project.
npm install core-js --save
I've been looking over the docs and checking other people's questions but I can't find the simple answer to how to compile all my sass down to a simple css file and specify the directory I want the resulting css file to output to.
For quick context:
I have a public directory with a stylesheets directory and a build directory in it. webpack compiles the app into build, and I'd like to have the sass compile style.css into the stylesheets directory.
Here's a screenshot of my public directory:
public dir img
I'd like to be able to do something like this in my webpack.config.js (only showing pertinent code for brevity):
const ExtractTextPlugin = require('extract-text-webpack-plugin');
...
// To be called in plugins:
const cssOutput = new ExtractTextPlugin('./public/stylesheets/style.css');
inside module loaders:
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader'),
},
In plugins:
plugins: [
.
.
.
cssOutput,
],
I'd like to be able to access the output file with this line in my index.html file located in the public directory:
<link rel="stylesheet" href="/stylesheets/style.css" />
I'm currently doing this using gulp and it works fine, I'm just trying to transition everything into webpack. Any help would be greatly appreciated!
Turns out you can just set the output file like this:
const cssOutput = new ExtractTextPlugin('../stylesheets/style.css', { allChunks: true });
I made the noob mistake of forgetting to add:
require('_scss/style.scss');
in my index.jsx file.
For anyone who runs into this issue, I still had trouble with fonts and images, so inside module loaders in the webpack.config.js I had to add:
{
test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/,
loader: 'file',
},
and since this output everything into my build directory, I just changed the css to output everything in the build directory as well to prevent path errors. I changed it to this:
const cssOutput = new ExtractTextPlugin('style.css', { allChunks: true });
Hopefully this helps someone else who runs into this type of issue!
Work for Me::
webpack.config.js
module.exports = {
entry: ['./src/app.ts', './src/sass/style.scss'],
module:{
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
include: [path.resolve(__dirname, 'src', 'src/class')]
},
{
test: /\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: '/css/[name].css'
}
},
{
loader: 'extract-loader'
},
{
loader: 'css-loader?-url'
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
],
include: [path.resolve(__dirname, 'src/sass')]
}
]
},
output: {
filename: 'js/app.js',
path: path.resolve(__dirname, 'public')
}
}
postcss.config.js
module.exports = {
plugins: {
'autoprefixer': {}
}
}
package.json
{
"name": "tsscript",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"nov": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.8.5",
"css": "^3.0.0",
"css-loader": "^3.6.0",
"extract-loader": "^5.1.0",
"postcss-loader": "^3.0.0",
"sass": "^1.26.10",
"sass-loader": "^9.0.2",
"style-loader": "^1.2.1",
"ts-loader": "^8.0.0",
"typescript": "^3.9.6",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12"
}
}
Directory Snap:
Have you take a look at https://www.npmjs.com/package/extract-text-webpack-plugin?
you'll probably need it.
Recent solution, you can use mini-css-extract-plugin, css-loader, and sass-loader. mini-css-extract-plugin can create a CSS file per JS file which contains CSS.
Install dependencies:
npm i -D mini-css-extract-plugin css-loader sass-loader
For example, your main JS file that includes a style is ./src/index.js:
...
import './src/style.scss';
...
Configure webpack.config.js:
...
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
...
entry: {
main: './src/index.js',
},
plugins: [
new MiniCssExtractPlugin(),
],
...
module: {
rules: [
...
{
test: /\.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
],
},
...
]
},
resolve: {
modules: ["node_modules", path.resolve(__dirname, "src")],
extensions: ['.js', '.scss', ...]
}
}
Then, you can check your output directory, there will be main.css. The plugin set default name to [name].css (entry name).