Using Compass in Vue-H5 Tutorial-php.cn

Using Compass in Vue

php中世界最好的语言

Release： 2018-03-27 17:22:35

Original

1891 people have browsed it

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

Copy after login

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

Copy after login

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!