@2012mjm/next-sass 中文文档教程
Next.js + Sass
在你的 Next.js 项目中导入 .sass
或 .scss
文件成分。
Installation
npm install --save @2012mjm/next-sass node-sass
或者
yarn add @2012mjm/next-sass node-sass
Usage
样式表被编译为 .next/static/css
。 Next.js 会自动将 css 文件添加到 HTML 中。 在生产中添加了一个块散列,以便在部署新版本的样式表时更新样式。
Config
在你的项目中创建一个 next.config.js
// next.config.js
const withSass = require('@2012mjm/next-sass')
module.exports = withSass({
/* config options here */
})
创建一个 Sass 文件 styles.scss
,这是没有 Sass 模块
$font-size: 50px;
.example {
font-size: $font-size;
}
并使用 module.scss
Sass 模块的扩展,例如: styles.module.scss
创建一个页面文件 pages/index.js
import "../styles.scss"
export default () => <div className="example">Hello World!</div>
并将其用于 Sass 模块
import styles from "../styles.module.scss"
export default () => <div className={styles.example}>Hello World!</div>
With options
您还可以传递一个列表通过传递一个名为 cssLoaderOptions
的对象将选项传递给 css-loader
。
例如,启用本地作用域CSS 模块,您可以这样写:
// next.config.js
const withSass = require('@2012mjm/next-sass')
module.exports = withSass({
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]",
}
})
Extract css initialize
// next.config.js
const withSass = require('@2012mjm/next-sass')
module.exports = withSass({
cssExtractOutput: {
filename: {
dev: 'static/css/[name].css',
prod: 'static/css/[contenthash:8].css'
},
chunkFilename: {
dev: 'static/css/[name].chunk.css',
prod: 'static/css/[contenthash:16].css'
}
}
})
您导出的 HTML 将反映本地作用域的 CSS 类名。
有关受支持选项的列表,请参阅 webpack css-loader
自述文件 .
With SASS loader options
您可以从 node-sass 传递选项
// next.config.js
const withSass = require('@2012mjm/next-sass')
module.exports = withSass({
sassLoaderOptions: {
includePaths: ["absolute/path/a", "absolute/path/b"]
}
})
PostCSS plugins
在您的文件中创建一个 next.config.js
项目
// next.config.js
const withSass = require('@2012mjm/next-sass')
module.exports = withSass({
/* config options here */
})
创建一个 postcss.config.js
module.exports = {
plugins: {
// Illustrational
'postcss-css-variables': {}
}
}
创建一个 CSS 文件 styles.scss
这里的 CSS 使用的是 css-variables postcss 插件。
:root {
--some-color: red;
}
.example {
/* red */
color: var(--some-color);
}
当没有找到postcss.config.js
时,postcss-loader
不会被添加,也不会造成开销。
您还可以通过传递名为 postcssLoaderOptions
的对象将选项列表传递给 postcss-loader
。
例如,要将主题环境变量传递给 postcss-loader,您可以这样写:
// next.config.js
const withSass = require('@2012mjm/next-sass')
module.exports = withSass({
postcssLoaderOptions: {
parser: true,
config: {
ctx: {
theme: JSON.stringify(process.env.REACT_APP_THEME)
}
}
}
})
Configuring Next.js
可选地,您可以添加自定义 Next.js 配置作为参数
// next.config.js
const withSass = require('@2012mjm/next-sass')
module.exports = withSass({
webpack(config, options) {
return config
}
})
Next.js + Sass
Import .sass
or .scss
files in your Next.js project
Notice: this library supports simultaneously the Sass modules and Sass, it also has the ability to chunk css files for each components.
Installation
npm install --save @2012mjm/next-sass node-sass
or
yarn add @2012mjm/next-sass node-sass
Usage
The stylesheet is compiled to .next/static/css
. Next.js will automatically add the css file to the HTML. In production a chunk hash is added so that styles are updated when a new version of the stylesheet is deployed.
Config
Create a next.config.js
in your project
// next.config.js
const withSass = require('@2012mjm/next-sass')
module.exports = withSass({
/* config options here */
})
Create a Sass file styles.scss
, this is without Sass modules
$font-size: 50px;
.example {
font-size: $font-size;
}
And use the module.scss
extension for the Sass module, for example: styles.module.scss
Create a page file pages/index.js
import "../styles.scss"
export default () => <div className="example">Hello World!</div>
And use this for Sass module
import styles from "../styles.module.scss"
export default () => <div className={styles.example}>Hello World!</div>
With options
You can also pass a list of options to the css-loader
by passing an object called cssLoaderOptions
.
For instance, to enable locally scoped CSS modules, you can write:
// next.config.js
const withSass = require('@2012mjm/next-sass')
module.exports = withSass({
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]",
}
})
Extract css initialize
// next.config.js
const withSass = require('@2012mjm/next-sass')
module.exports = withSass({
cssExtractOutput: {
filename: {
dev: 'static/css/[name].css',
prod: 'static/css/[contenthash:8].css'
},
chunkFilename: {
dev: 'static/css/[name].chunk.css',
prod: 'static/css/[contenthash:16].css'
}
}
})
Your exported HTML will then reflect locally scoped CSS class names.
For a list of supported options, refer to the webpack css-loader
README.
With SASS loader options
You can pass options from node-sass
// next.config.js
const withSass = require('@2012mjm/next-sass')
module.exports = withSass({
sassLoaderOptions: {
includePaths: ["absolute/path/a", "absolute/path/b"]
}
})
PostCSS plugins
Create a next.config.js
in your project
// next.config.js
const withSass = require('@2012mjm/next-sass')
module.exports = withSass({
/* config options here */
})
Create a postcss.config.js
module.exports = {
plugins: {
// Illustrational
'postcss-css-variables': {}
}
}
Create a CSS file styles.scss
the CSS here is using the css-variables postcss plugin.
:root {
--some-color: red;
}
.example {
/* red */
color: var(--some-color);
}
When postcss.config.js
is not found postcss-loader
will not be added and will not cause overhead.
You can also pass a list of options to the postcss-loader
by passing an object called postcssLoaderOptions
.
For example, to pass theme env variables to postcss-loader, you can write:
// next.config.js
const withSass = require('@2012mjm/next-sass')
module.exports = withSass({
postcssLoaderOptions: {
parser: true,
config: {
ctx: {
theme: JSON.stringify(process.env.REACT_APP_THEME)
}
}
}
})
Configuring Next.js
Optionally you can add your custom Next.js configuration as parameter
// next.config.js
const withSass = require('@2012mjm/next-sass')
module.exports = withSass({
webpack(config, options) {
return config
}
})