How to use Compass in Vue

This article mainly introduces you to the method of using Compass in Vue. The editor thinks it is quite good. Now I will share it with you and give you a reference. I hope it can help you.

Writing motivation

After procrastinating for a long time, I finally made up my mind to write a personal website for myself. It not only has to look cool. Even if you want to show off, your skills should also be good, so take this opportunity to practice skills that you are not familiar with. The website plans to use Vue as the front-end framework and CSS to be written in Sass. But before the official start, I suddenly thought that since Sass has such a powerful tool as Compass, it would be a step too far to not use it. However, after searching for a round, I found that they all talked about how to use Sass in the Vue project without Compass. But I couldn’t give up on such a powerful tool and couldn’t practice it, so I continued to search and try, and finally succeeded in using Compass in the project, and then I came to share it. If it can help people who have this need, That's great too. Without further ado, let’s start coding. Finally, I will put this Demo on GitHub (￣▽￣)~*

Build a project with 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//把佐料在烧烤架上准备好后放上嫩肉

Modify configuration

Modify 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')] }),
  ...
 }
}
...

It’s that simple

*In the .sass file

*In the .vue file

The above is the detailed content of How to use Compass in Vue. For more information, please follow other related articles on the PHP Chinese website!