导入 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

UDDATE 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 官方 GitHub 回购中也有 some info

Answer 2

使用next-compose-plugins。

它为创建 next.js 配置提供了更简洁的 API，您不需要安装 @zeit/next-css 并且您也不必进行任何 webpack loader 配置让它发挥作用。

这里是 @zeit/next-source-maps 插件的示例，用于演示目的：

/* Import modules */
const withSourceMaps = require( '@zeit/next-source-maps' );
const withSass = require( '@zeit/next-sass' );
const withPlugins = require( 'next-compose-plugins' );

/* Configuration */
const NextAppConfig = ({
  // config stuff goes here, no webpack loader config required
})

/* Export declaration */
module.exports = withPlugins([ 
  [ withSourceMaps ],  
  [ withSass ]
], NextAppConfig );

我更喜欢在导出之前声明数组，因为这样设置更简洁：

// ... imports go here

/* Plugins array variable */
var plugins = [ [ withSourceMaps ], [ withSass ] ];

/* CONFIGURATION */
const NextAppConfig = ({
  // Config stuff goes here, no webpack configuration required
})

/* EXPORT DECLARATION */
module.exports = withPlugins( plugins, NextAppConfig );

https://github.com/cyrilwanner/next-compose-plugins

Answer 3

我像这样初始化了我的项目，包括 SCSS CSS PNG SVG TTF。

 npm install withSass@canary withCSS@canary node-sass

//next.config.js

const withSass = require('@zeit/next-sass');
const withCSS = require("@zeit/next-css");
module.exports = withCSS(withSass({
webpack (config, options) {
   config.module.rules.push({
       test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
       use: {
           loader: 'url-loader',
           options: {
               limit: 100000
           }
       }
   });

    return config;
    }
  }));

Answer 4

对于那些有外部包（在 node_modules 中）的人，这里有一个在下一个 9.3.0 上工作的 CSS+SASS 解决方案。它涉及通过 SASS 标准导入 CSS。本例使用videojs:

package.json

  "dependencies": {
    "@zeit/next-sass": "^1.0.1",
    "next": "^9.3.0",
    "next-absolute-url": "^1.2.2",
    "node-sass": "^4.13.1",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "video.js": "^7.7.5"
  },

next.config.js:

const withSass = require("@zeit/next-sass");
module.exports = withSass({
  assetPrefix: process.env.NEXT_BASE_PATH || '',
  exportTrailingSlash: true,
  exportPathMap: function() {
    return {
      '/': { page: '/' }
    };
  }
});

组件"VideoPlayer.jsx"需要外部CSS

import './VideoPlayer.scss';

VideoPlayer.scss:

@import '~video.js/dist/video-js.css';

导入 css 和 sass 文件 nextjs 7

Import css and sass files nextjs 7

reactjs

webpack-4

next.js