reactjs - 导入 css 和 sass 文件 nextjs 7

Question

我希望能够在项目中的任何文件中导入这两种类型的文件。

    import 'styles/index.scss';
    import 'styles/build/_style.css'

需要注意的是，我使用的是 Nextjs 7 和 webpack 4(nextjs7 附带)

在 Nextjs 6 中我们曾经在 next.config.js 中使用

const withCSS = require('@zeit/next-css')
const withSass = require('@zeit/next-sass')

const commonsChunkConfig = (config, test = /\.css$/) => {
  config.plugins = config.plugins.map(plugin => {
      if (
          plugin.constructor.name === 'CommonsChunkPlugin' &&
          plugin.minChunks != null
  ) {
      const defaultMinChunks = plugin.minChunks;
      plugin.minChunks = (module, count) => {
          if (module.resource && module.resource.match(test)) {
              return true;
          }
          return defaultMinChunks(module, count);
      };
  }
  return plugin;
  });
  return config;
};

module.exports = withCSS(withSass({
  webpack: (config, { isServer }) => {
      config = commonsChunkConfig(config, /\.(sass|scss|css)$/)
      return config
  }
}))

Answer 1

更新日期 2020 年 3 月

Nextjs v9.3 还添加了对 sass 的支持。更多信息here

2020 年 1 月更新

Nextjs v9.2 添加了对 CSS 的原生支持。更多信息on official docs

To get started using CSS imports in your application, import the CSS file within pages/_app.js.

Since stylesheets are global by nature, they must be imported in the Custom component. This is necessary to avoid class name and ordering conflicts for global styles.

If you are currently using @zeit/next-css we recommend removing the plugin from your next.config.js and package.json, thereby moving to the built-in CSS support upon upgrading.

<小时/>

这个基本示例适用于我并排使用 next-sass 和 next-css

/next.config.js

const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');

module.exports = withCSS(withSass());

/pages/index.js

import '../styles.scss';
import '../styles.css';

export default () => {
  return (
    <div className="example-sass">
      <h1 className="example-css">Here I am</h1>
    </div>
  );
};

/styles.css

.example-css {
  background-color: #ccc;
}

/styles.scss

$font-size: 50px;

.example-sass {
  font-size: $font-size;
}

/package.json

"dependencies": {
  "@zeit/next-css": "^1.0.1",
  "@zeit/next-sass": "^1.0.1",
  "next": "^7.0.2",
  "node-sass": "^4.10.0",
  "react": "^16.6.3",
  "react-dom": "^16.6.3"
}

这里是what I see on the screen

希望这有帮助!

PS有some info也在官方 GitHub 存储库上