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