Less、sass、css スタイルを Vue-cli 単一ファイル コンポーネントに導入するさまざまな方法に関する簡単な説明

ここで、less、sass、および css スタイルを Vue-cli 単一ファイル コンポーネントに導入するさまざまな方法について簡単に説明します。これは非常に参考になるものであり、皆さんのお役に立てれば幸いです。

vue-cli には sass と lass の設定が組み込まれています。必要に応じて、2 つのモジュールを直接ダウンロードするだけで、webpack は自動的に適切なローダーを使用して、lang 属性に基づいてモジュールを処理します。

sassを使用する必要がある場合は、インストールしてください:

npm install node-sass --save-dev 
npm install sass-loader --save-dev

lessを使用する必要がある場合は、インストールしてください:

npm install less --save-dev 
npm install less-loader --save-dev

Sassのインライン書き込み:

<style lang="sass" scoped> 
 //sass样式 
</style>

lessのインライン書き込み:

<style lang="less" scoped> 
 //less样式 
</style>

CSSインラインで書かれています:

<style lang="css" scoped> 
 //css样式 
</style>

sass は引用されています:

<style lang="sass" src="./index.sass"></style>

less は引用されています:

<style lang="less" src="./index.less"></style>

css は引用されています:

<style lang="css"> 
   @import &#39;./index.css&#39; 
</style> 
 或者 
<style lang="css" src="./index.css"></style>

上記は私が皆さんのためにまとめたものです。お役に立てば幸いです未来のみんなへ。

関連記事:

Angularはフィルター大文字/小文字を使用して大文字/小文字変換関数を実装する例

Angularは操作イベントコマンドng-clickを使用して複数のパラメータを渡す例

JavaScriptコードを使用して、 txtファイルのアップロード プレビュー機能

以上がLess、sass、css スタイルを Vue-cli 単一ファイル コンポーネントに導入するさまざまな方法に関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。