This module allows you to use css (+ optional [less, sass, modules]) all in one package. It uses the latest modules available css-loader, less-loader, sass-loader, postcss. Check out the sources, its dead simple.
Because I found it cumbersome to deal with the official packages from next-plugins to setup css + less + sass + modules. So I created this one. It has everything I need for my project, most projects, I believe.
npm install @webdeb/next-styles
// next.config.js
const withStyles = require('@webdeb/next-styles')
module.exports = withStyles({
less: true, // use .less files
sass: true, // use .scss files
modules: true, // style.(m|module).css & style.(m|module).scss for module files
lessLoaderOptions: {
javascriptEnabled: true,
},
sassLoaderOptions: {
sassOptions: {
includePaths: ["src/styles"], // @import 'variables'; # loads (src/styles/varialbes.scss), you got it..
},
},
cssLoaderOptions: {...},
postcssLoaderOptions: {...},
miniCssExtractOptions: {...} // ignoreOrder:true for https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250#issuecomment-544898772
})
Hint: Look at the source of truth: withStyles.js
This project inherits a known next-css problem. vercel/next-plugins#282
If your pages where you are importing css are not working, you are probably facing exactly this problem. The workaround is to load a css/scss file (can be even empty) into your _app.js.
import "../styles/global.scss"
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
- fork the project
~master
- locally clone the project in your machine (
git clone https/ssh github link to your fork
) - create a new branch in your fork (
git checkout -b your/branch/name
) - run
npm install
in your local clone of the repo - apply your code changes ( keep
CHANGELOG.md
and theREADME.md
file up to date, also modifypackage.json
version
as fit!) - run
npm pack
in your local clone of the repo - test your changes against a next.js project that uses your local repo ( use
npm install --save path/to/local/repo/{version}.tgz
to test your locally changed code) - if your code work as expected, remove the packed tgz file from the repo and commit to your fork
- create a PR to apply your fork in this repository
Most of the code was taken from the official next-css
& next-sass
package.