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

この記事では主に、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 サイトの他の関連記事を参照してください。