CSSプリプロセッサの使い方

プロジェクトの作成時にプリプロセッサが選択されていないため、対応するローダーを手動でインストールする必要があります。メソッドは次のとおりです: 1. Sass、「sass-loader node-sass」、2. Less、「less-loaderless」、3. Stylus、「stylus-loader stylus」。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS プリプロセッサ

1. css プリプロセッサとは

CSS プリプロセッサは、CSS にいくつかのプログラミング機能を追加するために使用される特殊なプログラミング言語です (CSS 自体はプログラミング言語ではありません)。 。

CSS プリプロセッサの最終的なコンパイルと出力は依然として標準の CSS スタイルであるため、ブラウザーの互換性の問題を考慮する必要はありません。

変数、単純な論理判断、CSS プリプロセッサの関数などの基本的なプログラミング スキルを使用できます。

2. 一般的に使用されるいくつかの CSS プリプロセッサ

• #sass

#less
stylus
3. CSS プリプロセッサの使用方法

プロジェクトの作成時に必要なプリプロセッサ (Sass/Less/Stylus) を選択しない場合は、次のことを行う必要があります。対応するローダーを手動でインストールします

# Sass

npm install -D sass-loader node-sass

# Less

npm install -D less-loader less

# Stylus

npm install -D stylus-loader stylus

例: App.vue は Sass

$color: #42b983;
a {
color: $color;
}

4. スタイルを自動的にインポートする

スタイル ファイル (カラー、変数、ミックスインなど) を自動的にインポートするには、style-resources-loader を使用できます。

npm i -D style-resources-loader

構成

const path = require('path')
function addStyleResource(rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [            ,
path.resolve(__dirname, './src/styles/imports.scss'),
],
})
}
module.exports = {
chainWebpack: config => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('scss').oneOf(type)))
},
}

推奨学習:

cssビデオチュートリアル

以上がCSSプリプロセッサの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。