Webpack 4: How to bundle sass into css (from scratch)

Показать описание

This video shows how to install and configure Webpack.
It also shows how to use :
PostCSS-loader and PostCSS config file
sass-loader
node-sass
css-loader
mini-css-extract-plugin
cssnano plugin
autoprefixer plugin

Рекомендации по теме

Комментарии

regex typo missing an escape slash /\.(scss|css)/

devn

Dude, you have no idea how long I have been searching for a video just like this. Thank you so-so-so much!

brooklinboyandsasa

wow thank you finally it worked. OML. of all the tutorials this is the only tutorial that did it from start to finish. now i hate js ecosystem with all the configurations and dependencies ffs lol

bswill

Thank you soo much, it really helped me. Especially loved the postcss configuration part.

jozsi

I'm doing everything right but I'm getting this error halfway through: ValidationError: Invalid options object. Mini CSS Extract Plugin Loader has been initialized using an options object that does not match the API schema.

drenibrahimi

Thanks for the video, . One question, may be a dump one. In my projects I may have many css files, like main.css, vendor.css and theme.css etc.. Ok so Is there a way to out put different css files without creating/generating JS entry files?

dashingpix

i am facing below error. can you please help me to resolve this.
Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration has an unknown property 'Plugins'. These properties are valid:
object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, experiments?, externals?, externalsPresets?, externalsType?, ignoreWarnings?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, snapshot?, stats?, target?, watch?, watchOptions? }
-> Options object as provided by the user.
For typos: please correct them.
For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
Loaders should be updated to allow passing options via loader options in module.rules.
Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
plugins: [
new
// test: /\.xxx$/, // may apply this only for some modules
options: {
Plugins: …
}
})
]

AshishChauhan-pcrb

HI! thanks for this tut!

ERROR in ./style.scss
Module build failed (from
ValidationError: Invalid options object. Mini CSS Extract Plugin Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'reloadAll'. These properties are valid:
object { publicPath?, esModule?, modules? }

"webpack": "^5.10.0",
"webpack-cli": "^4.2.0"

concettastellato

Hi Devn8 when I have used background-images in SCSS then get error on compile, pls help

prosenjitdeb

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.node should be one of these:
false | object { Buffer?, __dirname?, __filename?, console?, global?, process?, … }
-> Include polyfills or mocks for various node stuff.
Details:
* configuration.node should be false
* configuration.node should be an object.

have issue like above? how to resolve? . i tried other way also but does not work.

gayathrid

Webpack 4: How to bundle sass into css (from scratch)

Module Bundlers Explained... Webpack, Rollup, Parcel, and Snowpack

Webpack 4: How to bundle sass into css using extract-text-webpack-plugin

Webpack 4: How to bundle sass into css (from scratch)

Step By Step: Bundle Analyzer Plugin #8 - Webpack 4

Web Development with Angular and Webpack 4: Bundle W/O Config webpack.config.js|packtpub.com

Webpack Tutorial for Beginners #2 - Installing Webpack & Bundling JS Files

Webpack 4 Tutorial - Getting Started for Beginners

Webpack 5 Crash Course | Frontend Development Setup

Learn Webpack - Full Tutorial for Beginners

Gulp 4: How to Minify & Bundle JS Files

WHAT IS WEBPACK, HOW DOES IT WORK? | Webpack 2 Basics Tutorial

WEBPACK + MULTIPLE HTML FILES | Webpack 2 Basics Tutorial

Webpack Tips - Totally Tooling Tips

Vite in 100 Seconds

USING 3RD PARTY PACKAGES LIKE JQUERY| Webpack 2 Basics Tutorial

MEAN Stack Project Tutorial Part 4 : Setup Gulp and Webpack | Bundle your code!

DJANGO VUE JS TUTORIAL #4 Setup Webpack Bundle Tracker & Write File Plugin

Webpack crash course | easy way

Webpack Tutorial for Beginners #3 - The webpack.config File

Webpack Tutorial for Beginners #4 - Babel Loaders

4 Easy tips to reduce Angular bundle size

Must Know JavaScript Bundler - Parcel

Webpack & TypeScript Setup #4 - Webpack Dev Server

JavaScript : What Does Webpack 4 Expect From A Package With sideEffects: false