@2012mjm/next-sass 中文文档教程

发布于 5年前 浏览 26 项目主页 更新于 3年前

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
  }
})
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文