Any specific ways to use Compass in Vue?

This article mainly introduces how to use Compass in Vue. Now I will share it with you and give you a reference.

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 and cool, but also has good technical skills. , so I took this opportunity to practice some unfamiliar techniques. 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

*.sass file

*.vue file

is what I compiled for you. I hope it will be helpful to you in the future.

Related articles:

Vue page switching effect BubbleTransition

vue-infinite-loading2.0 Chinese document detailed explanation

Infinite loading vue-infinite-loading method in Vue

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