A brief discussion on the different methods of introducing less, sass and css styles into Vue-cli single file components

Below I will share with you a brief discussion on the different methods of introducing less, sass, and css styles into Vue-cli single-file components. It has a good reference value and I hope it will be helpful to everyone.

vue-cli has built-in sass and lass configurations. If necessary, just download two modules directly, and webpack will automatically use the appropriate loader to process them based on the lang attribute.

If you need to use sass, install:

npm install node-sass --save-dev 
npm install sass-loader --save-dev

If you need to use less, install:

npm install less --save-dev 
npm install less-loader --save-dev

sass’s inline writing:

<style lang="sass" scoped> 
 //sass样式 
</style>

less’s inline writing:

<style lang="less" scoped> 
 //less样式 
</style>

css’s inline writing:

<style lang="css" scoped> 
 //css样式 
</style>

Sass reference writing:

<style lang="sass" src="./index.sass"></style>

less reference writing:

<style lang="less" src="./index.less"></style>

css reference writing:

<style lang="css"> 
   @import &#39;./index.css&#39; 
</style> 
 或者 
<style lang="css" src="./index.css"></style>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Angular uses the filter uppercase/lowercase to implement letter case conversion function example

Angular uses the operation event command ng -Click to pass multiple parameters example

JavaScript code to implement the upload preview function of txt files

The above is the detailed content of A brief discussion on the different methods of introducing less, sass and css styles into Vue-cli single file components. For more information, please follow other related articles on the PHP Chinese website!