vue がプロジェクトを作成するとき、sass は何を意味しますか?

プロジェクトの作成時に vue で使用される sass は、css 補助ツールを強化するためのものであり、css の拡張機能です。sass は buby 言語で書かれた CSS 前処理言語であり、 html と同じ厳密なインデント スタイルを持ちます。 CSSの記述仕様と異なり、中括弧やセミコロンは使用されません。

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

vue がプロジェクトを作成するとき、sass は何を意味しますか?

Sass (Syntactical Awesome StyleSheets) は、buby 言語で書かれた CSS 前処理言語です。HTML と同じ厳密なインデント スタイルを持っています。 CSS の記述仕様とは大きく異なり、中括弧やセミコロンを使用しないため、広く受け入れられていません。

Sass は CSS を拡張するための補助ツールです。CSS の拡張機能です。変数、ネストされたルール、ミックスイン、継承 (拡張)、インポート (インライン インポート) などの高度な機能が追加され、これらの拡張機能により CSS が作成されますよりパワフルに、よりエレガントに。 Sass および Sass スタイル ライブラリ (Compass など) を使用すると、スタイル ファイルをより適切に整理および管理し、プロジェクトをより効率的に開発できます。

// deom.sass
#sidebar
　　width: 30%
　　background-color: #faa

知識の拡大:

vue-cli3 は sass/scss を統合する 2 つの方法を提供します

• プロジェクト作成時に選択してくださいプリプロセッサ sass

• sass-loader を手動でインストールする

##方法 1: vue プロジェクトの作成時にプリプロセッサ sass## を選択します #vue-cli3 を使用して vue プロジェクトを作成します

Vue CLI v4.5.15
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint) 
> Manually select features

上下キーを移動して「機能を手動で選択」を選択します。これは、作成したプロジェクトの構成を手動で選択することを意味します。

Enter キーを押して次のステップに入ります。表示は次のようになります:

? Check the features needed for your project: 
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support        
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

上下キーを移動し、CSS プリプロセッサーでスペースバーをクリックして選択し、 CSS 前処理ツールが必要であることを示します。

その後、css 前処理ツールの操作を実行すると、次のように表示されます。

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
  Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass)
  Less
  Stylus

CSS プリプロセッサとして Sass/SCSS (node-sass を使用) を選択します。

完了後、プロジェクトは sass-loader と node-sass の依存関係を自動的にインストールします。

プロジェクトの作成時に CSS プリプロセッサが選択されていない場合は、sass-loader と node-sass を手動でインストールして scss を統合することもできます。

npm install -D sass-loader node-sass

sass の使用

この時点で必要なのは、スタイルで lang を scss として指定することだけです:

<style>
$color = red;
</style>

vue サービス clie は、scss としてインストールした sass-loader を自動的に使用します。コンテンツローダー。

[関連する推奨事項:「

」]

以上がvue がプロジェクトを作成するとき、sass は何を意味しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。