Skip to content

CodeCoupler Webpack Import (S)CSS Standard Files

All imported CSS files will be bundled into one file in the dist folder. The name specified in the package.json will be used as the file name combined with a hash value 1. You can also change the filename in bundle.cssName (see Configuration Reference). To require a CSS file, simply add an import "./path/to/your/file.css"; to any of your JavaScript or TypeScript files.

You can use modern and pure CSS without worrying about vendor prefixes or browser inconsistencies. Read more about all the modern CSS you can use here: preset-env

All files are interpreted as SCSS, regardless of the file extension. You can use both .css and .scss.!3

Your CSS will be:

  • converted and extended with polyfills (postcss-preset-env)
  • extended with vendor prefixes (autoprefixer) based on your targeted browsers, as specified in .browserlistrc
  • optimized and minimized with cssnano
  • a copyright banner will be added using BannerPlugin
  • and finally a source map file will be created if you are in developing mode 2.

  1. Until version 3.4, the JS and CSS files did not contain a hash value. ↩

  2. Until version 3.1, the source-map was also produced and used in production mode. ↩

  3. Up through version 5.1, files with the .css extension were interpreted by sass-loader as plain CSS, and files with the .scss extension were interpreted as SCSS. ↩