Use the Compass method in Vue, and use the compass method in vue.

Use the Compass method in Vue, and use the compass method in vue.

Motivation

After a long delay, I finally made up my mind to write my own personal websites. Not only do I have to look so cool, but I also need to be OK with technology, so take this opportunity to exercise your unfamiliar technologies. The website plans to use Vue as the front-end framework, and Css uses Sass for writing. However, it suddenly occurred before the official start that, since Sass has such a powerful tool as Compass, it's not a step-by-step approach, however, after looking for a round of discovery, we all talked about how to use Sass in the Vue project without the Compass solution. However, I was unwilling to give up a powerful tool to practice, so after continuing searching and trying, I finally succeeded in using Compass in the project, and then I came to share it, if we can help us with this kind of demand, it would be excellent. Let's not talk about it much. Start coding and I will put this Demo on GitHub (￣ ▽ ￣ )~ *

Use vue-cli to create a project

Vue init webpack compass-demo // upload a barbecue grill npm install normalize.css axios vuex -- save // sprinkle with some seasoning npm install node-sass-loader mockjs -- save-dev // Brush some sauce npm install compass-mixins -- save-dev // prepare the seasoning on the barbecue shelf and put the tender meat

Modify configurations

Modify build/util. js

...Exports.css Loaders = function (options ){... return {... // modify sass and scss to 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 ')]}),...}...

That's simple.

* In the sass File

* In the vue File

Happy Birthday ~

Add the Demo GitHub address vue-compass.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.