「翻訳」 - Webpack を使用して CSS_html/css_WEB-ITnose をよりインテリジェントにコンパイルします

今では、すべてのスタイルを巨大な CSS に書き込む人はいないでしょう...

原文: Smarter CSS builds with Webpack

CSS をよく書く開発者として、SMACSS に触れたことがあるなら、 SUIT または BEM の場合は、ファイルをより小さく分散したモジュールに自然に分割する必要があります。ユーザーがダウンロードできるようにこれらを 1 つのファイル (bundle.css など) にコンパイルする必要がある場合は、アプリケーションが必要とするファイルを手動で指定する必要があります。

SASS では、@import は次のようになります:

stylesheets/  config/    colors.sass    media_queries.sass  modules/    btn.sass    dropdown.sass    header.sass  utilities/    align.sass    clearfix.sass

Rail または Middleman を使用したことがある場合は、Sprockets の //= require ステートメントに精通している必要があります:

@import "vendor/normalize"@import "config/colors"@import "config/media_queries"@import "modules/btn"@import "modules/dropdown"@import "modules/header"@import "utilities/align"@import "utilities/clearfix"

またはおそらくあなたGulp または Grunt を使用して、次の個別のファイルを収集、処理、マージする独自のパイプラインを用意します。

//= require vendor/normalize//= require_tree ./modules//= require_tree ./utilities

これらのメソッドにはすべて前提条件があります。つまり、アプリケーションで実際にどの CSS が使用されているかを知る必要があります。これを使用するには、かなり苦労して依存ファイルの退屈なリストを維持するか、単にファイルのディレクトリ全体を含める必要があります。

このようにすると、冗長な CSS が導入される可能性が高く、HTML テンプレートを作成するときは、タグ内のクラス名に基づいて冗長な CSS を見つけて削除することしか期待できません。 (もちろん、ここには uncss など、役立つ優れたツールがいくつかあります。)

何はともあれ、HTML ヘッダー内で CSS の依存関係を維持することは、私にとって耐えられないことです。

でも心配しないでください。JavaScript モジュールを使用して HTML を生成すれば、すべてが解決します (まだ試していない場合は、できるだけ早く将来のこのテクノロジーを試した方が良いです)。

Webpack を使用して UI の依存関係を導入する

Webpack を使用してモジュールを処理することは、UI モジュールを作成するときに、より正確に依存関係を導入できるようにするためです。

おそらく CommonJS 仕様を使用してモジュールを作成したことがあるでしょう:

gulp.task('styles', function () {  gulp.src('styles/**/*.scss')    .pipe(sass())    .pipe(gulp.dest('./tmp'))    .pipe(concat('bundle.css'))    .pipe(autoprefixer())    .pipe(gulp.dest('./build'));});

NodeJS で CommonJS 依存関係の読み込みを使用することは珍しいことではありませんが、ブラウザ側では、ネットワーク リクエストが非同期であるため、より面倒で、With が必要です。 SeaJS、requireJS。

モジュールをブラウザ上で実行するには、Webpack または Browserify を使用して、ページのすべての依存関係を 1 つのファイルにパッケージ化する必要があります。

しかし、UI コンポーネントには JS だけでなく、CSS、画像、さらにはフォントも含まれており、そのローダー メカニズムのおかげで、require 構文は単純な JS だけでなく、必要な依存関係を正確に参照するのに十分強力です。ファイル:

var _ = require("underscore");var findTastiestPizza = function (pizzas) {  return _.find(pizzas, function (pizza) {    return pizza === "hawaiian";  });};module.exports = findTastiestPizza;

さて、元の質問に戻りましょう。以前のリストの手動メンテナンスから離れて、プログラムを使用してよりインテリジェントに Bundle.css (実際に HTML で使用される CSS) を生成する方法です。苦しみの海。

必要なのは、JS の依存関係を宣言するのと同じように、テンプレート ビューで CSS と SASS の依存関係を宣言することだけです。Webpack は最終的に必要なものをすべて生成し、もちろん必要に応じてコンテンツを前処理します。 -処理。

たとえば、アプリケーションのロード ポイントを宣言します:

require("stylesheets/modules/btn");var img = require("images/default_avatar.png");

...そして、インポートされたサブモジュール自体が必要な SASS 依存関係を宣言します...

// index.jsvar React = require("react");var Header = require("./header");var Footer = require("./footer");var Page = React.createClass({  render () {    return (      <div> <Header /> <Footer /> </div> );  }});React.render(<Page />, document.querySelector("#main"));

// header.jsvar React = require("react");require("stylesheets/modules/header");var Header = React.createClass({  render () {    return (      <div className="header"> Header </div> );  }});module.exports = Header;

.. .Webpack は最終的に以下のような CSS ファイルを生成します

// footer.jsvar React = require("react");require("stylesheets/modules/footer");require("stylesheets/utilities/clearfix");var Footer = React.createClass({  render () {    return (      <div className="footer u-clearfix"> Footer </div> );  }});module.exports = Footer;

ほら、すごいじゃないですか！

その他の秘密

コード記述の順序に依存しなくなりました

この方法を使用すると、Webpack が指定した必要な順序でコードを生成するように、コードの順序を整理することができないことに注意してください。 、まるでジェンガのように積み上げるように。

それで、ヘッダー モジュールとフッター モジュールの依存関係の順序を変更すると...

.header { /* ... */ }.footer { /* ... */ }.u-clearfix { /* ... */ }

フッター モジュールの依存スタイル コンテンツと、フッターに含まれる .u-clearfix スタイル (clearfix) 、最初に生成されます:

// index.jsvar Footer = require("footer");var Header = require("header");

通常、CSS 依存関係リストを手動で管理するときは、次のようなさまざまな関数タイプに従ってリストを並べ替えます:

base

modules

utilities

These順序により、スタイルが相互に通常をオーバーライドできるようになります。
現在、手動の並べ替えに頼ることはできないため、スタイルをより慎重に記述する必要があります。
私はコードの順序に左右されることは決して好きではありません。通常、異なるファイルで同じスタイルの HTML 要素を宣言することは避けますが、同じスタイル属性が複数のクラスで宣言される場合があります。には、次のように書くことができます:

.footer { /* ... */ }.u-clearfix { /* ... */ }.header { /* ... */ }

这个例子中你需要对这些选择器的处理非常小心才行，SUIT 推荐使用 !important来处理这种情况，或者你可以试试这种 多重指定class的HACK方式来提高优先级。

关于SASS全局声明

如果你使用SASS的 @import处理你的样式，你可能还需要在各个模块共享你的变量和mixin声明，那么你可能会写过这样的代码：

@import "config/variables"@import "mixins/vertical_align"@import "modules/header"@import "modules/footer"

这样一来跟随在后面的模块都可以共享到config和mixins的内容。

在Webpack的世界里，每一个sass文件都是隔离编译的， 这不无道理，但我觉得有个好的办法来处理这种事情，那就是在你需要引入变量和mixins的地方手动引入它们：

// header.sass@import "config/colors".header  color: $red

// footer.sass@import "config/colors".footer  color: $blue

各文件明确指定了自己要的依赖，在我看来，非常轻巧，非常棒！

最最有价值的留在最后

我在Github上创建了一个 例子供大家把玩，当然别忘了Star一下 :)

译文之外

还有一篇不错的 Webpack for react的book，其中也有关于sass、less的相关配置，可以参考一下 :)