Using Compass in Vue

This time I will bring you the use of Compass in Vue. What are the precautions for using Compass in Vue? The following is a practical case, let's take a look.

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 take this opportunity to practice the techniques you are unfamiliar 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 was unwilling to give up such a powerful tool

Practice, so I continuedsearch and tried various things, and finally succeeded in using Compass in the project, and then the whole thing happened. Sharing it, if it can help people who have this need, that would be great. 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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Other related articles on the Chinese website!

Recommended reading:

How to implement file upload with AjaxUpLoad.js

The order of operating Vue rendering and plug-in loading

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