导入 css 和 sass 文件 nextjs 7答案

【问题标题】：Import css and sass files nextjs 7导入 css 和 sass 文件 nextjs 7
【发布时间】：2019-04-16 22:56:58
【问题描述】：

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

    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
  }
}))

【问题讨论】：

最简单的解决方案是将_style.css 重命名为_style.scss 并使用sass loader。为什么它不适合你？ :)
问题是有些包有它自己的style.css，我只需要导入它而不更改包核心。
好的，我明白了。我添加了一个适合我的示例设置。

标签： reactjs webpack-4 next.js

【解决方案1】：

对于那些有外部包（在 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"
  },

下一个.config.js：

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

需要外部 CSS 的组件“VideoPlayer.jsx”

import './VideoPlayer.scss';

VideoPlayer.scss：

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

【讨论】：

【解决方案2】：

2020 年 3 月更新

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

2020 年 1 月更新

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

要开始在您的应用程序中使用 CSS 导入，请在 pages/_app.js 中导入 CSS 文件。

由于样式表本质上是全局的，因此必须在自定义组件中导入它们。这是避免全局样式的类名和顺序冲突所必需的。

如果您当前正在使用 @zeit/next-css，我们建议您从 next.config.js 和 package.json 中删除该插件，从而在升级时转向内置 CSS 支持。

这个基本示例适用于我，同时拥有 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

【讨论】：

太好了！我只需要更新我的 css/sass/next 依赖项和工作！谢谢
知道如何将它部署到 zeit-now 吗？我应该在 now.json 中添加什么？谢谢
我刚刚尝试发现将 next/css 和 next/sass 部署到现在 v2.x 时存在一些问题。这是我也面临的一个问题github.com/zeit/next.js/issues/5750#issuecomment-443562606
不断面对这个问题，TypeError: Cannot read property 'local' of undefined

【解决方案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;
    }
  }));

【讨论】：

【解决方案4】：

使用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

【讨论】：