Next.js: 外部のcssおよびscssファイルの操作

作成日 2017年10月19日 · 38コメント · ソース: vercel/next.js

これは私が知っている冗長な問題ですが、私はこの問題を意図的に開きました。 next.jsボイラープレート（redux、redux-sagaなど）をセットアップするのに3日かかり、外部cssファイルとscssファイルのロードのセットアップに行き詰まるのは2日です。 with-global-stylesheetとwith-scoped-stylesheet-and-postcssの例を確認しましたが、それぞれに前の号で述べた大きな問題があります。ハックでこの問題を解決しているオープンおよびクローズの問題が多すぎます...問題を残して最良の解決策を見つけるのではなく、現在利用可能な解決策で解決して、より良い解決策を見つけることをお勧めします。多くの人が今この問題を抱えていて、今それが解決されるのを見たいからです！

ソース

arefaslani

👍66

最も参考になるコメント

また、私は個人的にこの問題で人々が持っている口調が好きではないことを指摘したいと思います。
私はあなたがcssをインポートしたいと思っていることを完全に理解しています。そして、私たちはこの要求をよく知っています。そのため、私はこの1週間、可能な限り最良のソリューションに取り組んできました👍
これについてはすぐに詳しく説明します。それまでは、親切で幸せな休日をお過ごしください🎅😄

timneutkens 2017年12月28日

❤21 🎉12 👍8

全てのコメント38件

私は同意します、styled-jsxだけがクリーンな（ホットリロードを含む）サポートを持っており、それが私がラピッドプロトタイピングを必要とするとき以外にNext.jsを使用することを妨げている理由です。

CSSモジュールのCSSのスコープの問題に対する解決策ははるかにクリーンなものだと思います。さらに、CSSモジュールを使用すると、クラスを子コンポーネントに渡すことができます（ babel-plugin-inline-react-svgインポートされたSVGに非グローバルクラスを配置してみてください） styled-jsxを使用）。

それと私は、フレームワークのロックインを可能な限り防ぐために.cssファイルを標準化し、キャッシュ用に本番環境で外部CSSファイルを使用することを好みます（そして、運が悪ければRespond.jsのようなMQポリフィルを機能させるためにまだIE8をサポートする必要があります）。

CrocoDillon 2017年10月22日

👍14

大規模な+1
外部のcss / scssのような単純なことをnext.jsで実現することはほとんど不可能であり、それが私のアプリケーションの90％で役に立たないことは、大きなフラストレーションです。

ブートストラップを使用していますが、外部スコープのcssを追加して、グローバルブートストラップcssインポートが1つある構成が必要です。

israelidanny 2017年10月25日

👍38

スタイル付きjsx1（コンパイルを処理するためのwebpack）で外部スタイラスを動作させることができましたが、個別のcssファイルの処理の変更が導入されたため、スタイル付きjsx2でそれを理解するのに苦労しました。
現在のアプローチ：

import ComponentStyles from './footer.styl';
...
      <style jsx>
        {ComponentStyles}
      </style>

https://github.com/zeit/next.js/tree/master/examples/with-styled-jsx-scssが外部のscssファイルを操作しているのを見るのは素晴らしいことです。

ilionic 2017年10月30日

👍6

環境を整えるときも同じ試練を経験しました。
最終的には、scss + postcssとlost-gridを使用したグローバルスタイルシートで解決しました。
ホットリロードは機能するため、（グローバルスタイルシートが一度にロードされるため）理想的なソリューションではありませんが、妥協点としては問題ありません。

依存関係

"autoprefixer": "^7.1.6",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-wrap-in-js": "^1.1.1",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"pixrem": "^4.0.1",
"postcss-easy-import": "^3.0.0",
"postcss-loader": "^2.0.8"

package.json

  ...
  "postcss": {
    "plugins": {
      "lost": {},
      "postcss-easy-import": {
        "prefix": "_"
      },
      "autoprefixer": {},
      "pixrem": {}
    }
  }
  ...

next.config.js

webpack: (config, { dev }) => {
    config.module.rules.push(
      {
        test: /\.(css|scss)/,
        loader: 'emit-file-loader',
        options: {
          name: 'dist/[path][name].[ext]'
        }
      }
    ,
      {
        test: /\.css$/,
        use: ['babel-loader', 'raw-loader', 'postcss-loader']
      }
    ,
      {
        test: /\.s(a|c)ss$/,
        use: ['babel-loader', 'raw-loader', 'postcss-loader',
          { loader: 'sass-loader',
            options: {
              includePaths: ['styles', 'node_modules']
                .map((d) => path.join(__dirname, d))
                .map((g) => glob.sync(g))
                .reduce((a, c) => a.concat(c), [])
            }
          }
        ]
      }
    )
    return config
  }

pages/_document.js

...

import stylesheet from 'styles/main.scss'

   ...
        <Head>
          <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
        </Head>
   ...

そして、/ styles /main.scssからスタイルを管理できます。
それが役に立てば幸い

steeeeee 2017年11月14日

👍2

これらの2つのスタイル例（ with-global-stylesheetとwith-scoped-stylesheets-and-postcss ）のそれぞれに関する私の問題は、スナップショット内のCSSを使用したJestおよびSnapshotテストとの統合が簡単ではないことです。 JestをWebpackで動作させることに成功した人もいますが、それは特にCSSをスキップすることによるものです。

このSOの回答で説明されbabel-jestプリプロセッサファイルを実行することは、非常に悪いハックのようです。

with-global-stylesheetのように外部CSSを取得するようですが、Jestを使用するには、Webpackに依存することはできず、Babelのみに依存します。

この分野で誰かアイデアがありますか？

jthegedus 2017年11月14日

👍1

私も同様の問題に直面しています。 nextjsは初めてで、「with-external-scoped-css」の例を正しく機能させることができません。私のcssがロードされることもあれば、ロードされないこともあります。それがあなたが話しているのと同じ問題であるかどうかはわかりません。

https://github.com/zeit/next.js/issues/3276

anacicconi 2017年11月14日

👍5

このローダーで解決された外部スタイルの問題https://github.com/coox/styled-jsx-css-loader

ilionic 2017年11月17日

👎2 👍2 🎉1

@ilionic私はあなたの解決策をチェックしました。それは素晴らしい！ありがとうございました：）

arefaslani 2017年11月18日

😕3 👎2

@arefaslaniこの問題は解決されていないと思います。

HTTP v1の時点では、大量のCSSをロードするのは依然として恐ろしいパフォーマンス税であり、最初に描画するまでの時間が劇的に長くなります。

適切な外部スタイルのサポートにより、CSSのインポートが可能になり、結果としてインラインではありません