Импорт CSS и SASS файлов NextJS 7 - PullRequest
Новая
       10

Импорт CSS и SASS файлов NextJS 7

0 голосов
/ 14 ноября 2018

Я хочу иметь возможность импортировать в любой файл в моем проекте файлы двух типов. 

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

Ответы [ 3 ]

0 голосов
/ 01 июня 2019

Используйте next-compose-plugins.

Он предоставляет более чистый API для создания next.js конфигураций, вам НЕ НУЖНО устанавливать @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 голосов
/ 05 августа 2019

Я инициализировал свой проект следующим образом: 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 голосов
/ 15 ноября 2018

Этот базовый пример работает для меня, имея рядом 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"
}

Вот то, что я вижу на экране

Надеюсь, это поможет!

PS В официальном репозитории GitHub также есть некоторая информация

...