角の方法をsassとnextjsを使用する!

私は、フロントエンドの世界(11 +年)の非常に良い経験をしている誰かです、そして、私はフレームワーク(角度のような)がコード・スタイル一貫性を保つすばらしい方法であると信じています、そして、品質は非常に大きいチームで特別です.
しかしフレームワークは簡単にカスタマイズできないという欠点がある.
私は最近、新しいプロジェクトをキックオフにNextJSを使用し始めた、と私は非常に簡単な構造の決定をするのは難しいという事実にショックを受けた!特に、それが私の論理をスタイルファイルに接続するのと同じくらい単純であるとき.
私が非常に長い時間前に使用されているいくつかのアプローチは、懸念の分離、フロントエンドアプリケーションでこれを適用する最も簡単な方法は、例えば、すべてのロジック(TS、またはJSファイル)、スタイル(CSS、SASS、SCSS ..など)、および同じディレクトリ内に(時々SFCSを使用しない場合)HTMLを維持し、それらを一緒にリンクを維持する(すなわち、単一のエントリポイントは通常、スタイルやレイアウトファイルをインポート)です.
私はNextJSを使用し始めたとき、私は私の反応コンポーネントと同じディレクトリに私のsassファイルを維持することは私が想像したように簡単ではないことがわかったが、いくつかの時間の探索と試行した後、私は作業ソリューションを見つけた良いニュースを知っているので、これは同様の解決策を探している場合は、知識を共有し、誰かの時間を節約するためにこの記事を書いている理由です.
手順:

nextjs Hello Worldプロジェクトを作成することから始めましょう(この記事を書く時点で、最新のnextjsバージョンは12.0.10です)

npx create-next-app@latest --typescript

次のすべての依存関係をインストールする必要がありますnpm i

次の我々のアプリを実行することができますnpm run devこれまでのところ、すべてが涼しく見える.しかし、次の構造でシンプルなページを作成したいときに挑戦が始まる

|-- path
    |-- to
        |-- MyPage
            |-- index.tsx
            |-- style.scss

残念ながらNextjsはモジュールを使用することができます.
ページの下の

は、Mypageフォルダを作成して、2つの新しい子供、index.tsxとstyle.scssをつくります

// index.tsx
import React from 'react';
import './style.scss';

export default function MyFirstPage() {
  return (
    <div id="my-first-page">
      <h1 className="title-1">Title 1</h1>
      <h1 className="title-2">Title 2</h1>
    </div>
  );
}

// style.scss
#my-first-page {
  .title-1 {
    color: red;
  }

  .title-2 {
    color: green;
  }
}

私たちがちょうどapp.tsxに作成したページをインポートします

import React from 'react';
import Router from 'next/router';
import { AppProps } from 'next/app';
import MyFirstPage from './MyFirstPage';

const App = ({ Component, pageProps }: AppProps) => {
  // return <Component {...pageProps} />;
  return <MyFirstPage />;
};
export default App;

前のコードを実行しようとすると、nextjsからエラーが発生します

Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js.
Read more: https://err.sh/next.js/css-global

私は長い間この時点で動けなくなりました、そして、インターネットの大部分の解決は私にとって本当に不便でした、しかし、幸運にも、私は解決策を思いつきます!

インストール

npm install mini-css-extract-plugin css-loader sass sass-loader

プラグインはオプションですが、以前のnextjsの設定を自由に設定することができます.あるいは、configファイルから削除して、この手順をスキップしてください

npm install next-compose-plugins next-transpile-modules

次は

を開きます.設定.JSと次の追加

const withTM = require('next-transpile-modules')([]);

const withPlugins = require('next-compose-plugins');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = withPlugins([withTM], {
  reactStrictMode: true,
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Find and remove NextJS css rules.
    const cssRulesIdx = config.module.rules.findIndex((r) => r.oneOf);
    if (cssRulesIdx === -1) {
      throw new Error('Could not find NextJS CSS rule to overwrite.');
    }
    config.module.rules.splice(cssRulesIdx, 1);

    // Add a simpler rule for global css anywhere.
    config.plugins.push(
      new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: 'static/chunks/pages/[contenthash].css',
        chunkFilename: 'static/chunks/pages/[contenthash].css',
      }),
    );

    config.module.rules.push({
      test: /\.(sa|sc|c)ss$/i,
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
    });

    config.module.rules.push({
      test: /\.tsx/,
      use: [defaultLoaders.babel],
    });

    return config;
  },
});

上記のコードは単にNextjsグローバルCSS規則を上書きします、そして、また、それはSASS

アプリをもう一度実行し、ここに行く!CSSの仕様を使用するだけで良い非スコープスタイル

あなたは私のように怠惰な場合は、hereから全体の実験をクローンし、それを再生する自由を感じる!ハッピーハッキング✌️