web-dev-qa-db-ja.com

cssファイルとsassファイルをインポートするnextjs 7

プロジェクトの任意のファイルに2種類のファイルをインポートできるようにしたい。

    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
  }
}))
reactjswebpack-4next.js
5
Rodrigo Chaclan

このようにプロジェクトを初期化すると、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;
    }
  }));
0
Salil Sharma

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

0
Cliff Crerar

外部パッケージ（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: '/' }
    };
  }
});

外部CSSを必要とするコンポーネント「VideoPlayer.jsx」

import './VideoPlayer.scss';

VideoPlayer.scss：

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