Vueのbass.scssソリューションのグローバル導入の詳細な説明

亚连
リリース: 2018-05-28 17:30:37
オリジナル
1906 人が閲覧しました

この記事では主に、Vueのbass.scssのグローバル導入に関する詳細な解決策を紹介します。編集者はそれが非常に優れていると考えたので、参考として共有します。エディターをフォローして見てみましょう

Vue コンポーネントに scss 変数とミックスインをグローバルに導入する問題を解決するために、「sass-resources-loader」という名前のパーサーがロードされます。

インストール

$ > cnpm i -D sass-resources-loader
ログイン後にコピー

設定

設定されている場合は、vue のローダーパーサー、つまり vue-cli スキャフォールディングによって構築されたファイル、つまり build/utils で設定されます。 js、このファイルには cssLoaders() メソッドが定義されており、以下のように css 以降の解析メソッドが定義されています。

// build/utils.js
exports.cssLoaders = function (options) {
 options = options || {}
 
 ...
 return {
  // ...
  sass: generateLoaders('sass', { indentedSyntax: true }),
  // 定义在这里 =======================》
  scss: generateLoaders('sass').concat(
   {
    loader: 'sass-resources-loader',
    options: {
     resources: path.resolve(__dirname, '../src/common/style/global.scss') // 需要全局引入的文件
    }
   }
  ),
  // 定义在这里 =======================》
  // ...
 }
}

// global.scss
@mixin line-height($height) {
 height: $height;
 line-height: $height;
}
$head-height: .45rem;

// xx.vue
<style lang="scss">
 height: @include line-height(45px);
</style>
ログイン後にコピー

以上、皆様の参考になれば幸いです。

関連記事:

JavaScript、Ajax、jQueryの予備理解と3つの関係の比較

jqueryとphpを組み合わせてAJAXロングポーリングを実装

Jqueryの具体的な例でどのような場合に使用するかを紹介AJAX を使用する、AJAX どこで使用する必要がありますか?

以上がVueのbass.scssソリューションのグローバル導入の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!