как использовать TS + css + scss в рамках реагировать SSR дальше? - PullRequest
Новая
       21

как использовать TS + css + scss в рамках реагировать SSR дальше?

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

Я использую TS + CSS + SCSS в nextJS.Я импортирую некоторые CSS-файлы, но я хочу установить cssModule:false для этих CSS-файлов, затем я импортирую свои собственные файлы SCSS и установлю cssModule:true.

Ниже приведен мой код в next.config.js,он передает файлы CSS в модуль. 

const withSass = require("@zeit/next-sass");
const withTypescript = require("@zeit/next-typescript");
const withCSS = require("@zeit/next-css");
module.exports = withTypescript(
    withCSS(
      withSass({
        cssModules: true
      })
    )
);

Не могли бы вы посоветовать мне правильный подход к импорту файлов CSS?

1 Ответ

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

Конфигурация next-css является глобальной, вы либо используете cssModules, либо нет.

Моим решением для этого было настроить веб-пакет вручную, чтобы не применять cssModules к файлам с суффиксом .global.css.

config.module.rules.forEach(rule => {
  if (rule.test.toString().includes('.scss')) {
    rule.rules = rule.use.map(useRule => {
      if (typeof useRule === 'string') {
        return {
          loader: useRule,
        };
      }
      if (useRule.loader.startsWith('css-loader')) {
        return {
          oneOf: [
            {
              test: /\.global\.scss$/,
              loader: useRule.loader,
              options: {
                ...useRule.options,
                modules: false,
              },
            },
            {
              loader: useRule.loader,
              options: useRule.options,
            },
          ],
        };
      }

      return useRule;
    });

    delete rule.use;
  }
});

Для next-css существует открытый PR для включения аналогичного решения в lib.

...