Vue でコンパスを使用する方法

この記事では、主に Vue で Compass を使用する方法を紹介します。参考になれば幸いです。

執筆の動機

長い間先延ばしにしていた後、ついに自分で個人のウェブサイトを書く決心をしました。この機会に、慣れないウェブサイトを書いて練習してみます。この Web サイトでは、フロントエンド フレームワークとして Vue を使用し、CSS は Sass で記述される予定です。しかし、正式に開始する前に、Sass には Compass のような強力なツールがあるので、それを使用しないのはあまりにも遠いステップであると突然思いましたが、ラウンドを検索したところ、使用方法について皆が話し合っていることがわかりました。 Compass を使用しない Vue プロジェクトの Sass。しかし、私はこのような強力なツールを諦めることができず、実践することもできず、探し続け、ついにプロジェクトで Compass を使用することに成功し、それが人々に役立つのであれば共有することにしました。このようなニーズがある人は、それも素晴らしいことです。早速、コーディングを始めてみましょう(￣▽￣)~*

vue-cliでプロジェクトをビルド

vue init webpack compass-demo //撸个烧烤架
npm install normalize.css axios vuex --save//撒上一些调味料
npm install node-sass sass-loader mockjs --save-dev//刷上一些酱汁
npm install compass-mixins --save-dev//把佐料在烧烤架上准备好后放上嫩肉

設定を変更します

build/util.jsを変更する

...
exports.cssLoaders = function (options) {
 ...
 return {
  ...
  // 将sass和scss修改为如下
  sass: generateLoaders('sass', { indentedSyntax: true, includePaths: [path.resolve(__dirname, '../node_modules/compass-mixins/lib')] }),
  scss: generateLoaders('sass', { includePaths: [path.resolve(__dirname, '../node_modules/compass-mixins/lib')] }),
  ...
 }
}
...

とても簡単です

*.sassファイル

*.vueファイル

以上がVue でコンパスを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。