Node.js と LESS の完璧な組み合わせ

LESS は CSS を記述するための優れた方法であり、変数、ネストされたルール、ミックスイン、その他多くの便利な機能を使用できるため、CSS コードをより適切に整理するのに役立ちます。
最近Node.jsを勉強していて、アプリケーションで簡単にLESSを使えるように、レスミドルウェアのミドルウェアを使いたいと思っていました。構成後、LESS-Middleware は LESS コードを CSS コードに自動的にコンパイルします。

LESSファイルとCSSファイルを同じディレクトリに保存する場合、構成は簡単ですが、ソースディレクトリとターゲットディレクトリに異なるパスを使用したいのですが、ここで少し問題があるため、ここに次のようにすると思います見つかった問題は記録されます。
異なる「src」と「dest」ディレクトリを指定する場合は、「prefix」オプションも指定する必要があります。これは、ターゲットディレクトリに続くディレクトリと一致する必要があります。理解を深めるのに役立つ例を次に示します:

var  lessMiddleware = require("less-middleware");
app.use(lessMiddleware({
    src: __dirname + "/less",
    dest: __dirname + "/public/css",
    prefix: "/css",
    force: true
}));
app.use(express.static(__dirname + "/public"));

この例では、ソース ディレクトリをアプリケーションのルート ディレクトリの下の "/less" ディレクトリに設定し、CSS を "/public /" に出力させます。さらに、「/public」に続くディレクトリ、つまり「/css」ディレクトリに合わせて「prefix」属性も指定する必要があります
上記でforceパラメータを指定することもできます。 . 最初のリクエストで LESS ファイルを再コンパイルし、自動更新機能と組み合わせて、開発中のスタイル コードの変更が即座に反映されるようにします:

<link rel="stylesheet", type="text/css", href="css/styles.css">

。この記事が公開された時点で、less-middleware はバージョン 1.0.3 に更新されています。上記の構成は 0.1.x から 1.0.x への移行方法の紹介です。これも重要な変更です。——以前は options パラメータに設定されていたソース ディレクトリ パラメータの変更は次のとおりです:

lessMiddleware({
  src: path.join(__dirname, '/public')
})

ソース ディレクトリは必須パラメータであるため、ソース ディレクトリの最初のパラメータとして使用されます。アップグレード後のミドルウェアは次のようになります:

lessMiddleware(path.join(__dirname, '/public'))

2 番目の変更は、次のように、ミドルウェア パラメーターと LESS パラメーターを分離することです。これにより、パラメーター構造がより明確になります:

lessMiddleware(source, [{options}], [{parserOptions}], [{compilerOptions}])

オプション パラメーターがミドルウェアに提供されます。 、最後の 2 つのパラメーター オブジェクトはミドルウェアには影響せず、LESS 解析およびコンパイラーに渡されます。

この調整後、対応するパラメーター定義メソッドもそれに応じて調整する必要があります。

compress: から削除されました。オプション、compilerOptions で定義する必要があります。
dumpLineNumbers: オプションから削除されました。 削除されました。parserOptions で定義する必要があります。
optimization: オプションから削除されました、parserOptions で定義する必要があります。 parserOptions;
preprocessor: 定義のために preprocessor.less に移動されました;
relativeUrls: オプションから削除されました、parserOptions で定義する必要があります;
yuicompress: オプションから削除されましたCompilerOptions で定義する必要があります。
3 番目の変更は新しいパラメータが追加され、prefix パラメータと TreeFunctions パラメータが削除され、次のようにより柔軟に設定できるようになりました。
postprocess.css: 前に CSS コンパイル出力を変更します。保存中;
preprocess.less: 前に LESS 変更で解析およびコンパイルされます。
preprocess.path: ファイル システムによってロードされる前に LESS パスを変更します。次の方法で効果を与えます:

preprocess: {
  path: function(pathname, req) {
    return pathname.replace(/^\/less\//, '/css');
  }
}

以上がNode.js と LESS の完璧な組み合わせの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。