0.0.6 • Published 3 years ago
@steersman/next-sass v0.0.6
@steersman/next-sass
This module is just a set of configurations for Next.js to enable using styled-jsx with external SASS and CSS files.
Setup
yarn add @steersman/next-sassEdit next.config.js:
const withSass = require('@steersman/next-sass');
module.exports = withSass({/* your config */});Edit .babelrc.js or equivalent to replace next/babel preset:
module.exports = {
presets: [
'@steersman/next-sass/babel',
]
};Usage
Scoped
File name must end with '.scss' or '.css' and must not end with /\.(external|global|resolve)\.s?css/
import css from 'styles/Stunning.scss';
export default () => (
<div>
<style jsx>{css}</style>
<h1>Whoa!</h1>
</div>
);Global Internal
Outputs like <head><style>...</style></head>.
File name must end with '.global.scss' or '.global.css'
import css from 'styles/Amazing.global.scss';
export default () => (
<div>
<style jsx global>{css}</style>
<h1>Blows my mind!</h1>
</div>
);Global External
Outputs like <head><link ...></head>.
File name must end with '.external.scss' or '.external.css'
import 'styles/Awesome.external.scss'; // that's it
export default () => (<h1>I can't believe it!</h1>);