An attempt to support ES6 import/export for style-loader, mini-css-extract-plugin
Via npm:
npm install es6-css-loader --save-devVia yarn:
yarn add -D es6-css-loaderFor style-loader
const { styleLoader, cssLoader } = require('es6-css-loader'); const webpackConfig = { ... module: { rules: [ { test: /\.css$/, use: [ { loader: styleLoader, options: { // same as the current `style-loader` }, } { loader: 'css-loader', options: { ... } } ] } ] } }For mini-css-extract-plugin
const { miniCssExtractLoader, MiniCssExtractPlugin } = require('es6-css-loader'); const webpackConfig = { ... module: { rules: [ { test: /\.css$/, use: [ miniCssExtractLoader, { loader: 'css-loader', options: { ... } } ] } ] }, plugins: [ new MiniCssExtractPlugin({ filename: "[name].css", chunkFilename: "[id].css" }) ], }In your js/ts files
import { selectors you want to use } from './style.css'✍️ Why not css-loader? css-loader is usually used along with style-loader or mini-css-extract-plugin, therefore, supporting for a first pitching loader is what we need.
✍️ According to this webpack issue, webpack team will support es6 import/export by default in the upcomming release, but I don't think it will be soon, therefore, this plugin is the hacky solution (super ugly) and it might potentially break something in your codebase, therefore, using it with caution.