1. Use scss in vue
First, install the following dependencies:
cnpm i sass-loader node-sass -D
2. Introduce style files in vue
1) Introduced in the template html file. This method is compiled as it is in the generated html file. If you want to introduce external style files through link, it is recommended to use this method:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2imis</title> <link rel="stylesheet" href="./static/" rel="external nofollow" > </head> <body> <div ></div> <!-- built files will be auto injected --> </body> </html>
2) Introduced in the entry js file, some public style files can be introduced here. Here, the scss file will be parsed, and the corresponding css code will be inserted into the style tag that generates the html file, becoming an inline style.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUi from 'element-ui'
import '@/common/scss/'
= false
(ElementUi);
/* eslint-disable no-new */
new Vue({
router,
render: h => h(App)
}).$mount('#app');
3) Introduce in the corresponding template.vue file
I found a problem. If it is not introduced in it and directly introduces the scss file, such as the file, although the css code will be inserted into the generated html tag and becomes an inline style, the scss file will not be parsed, which will cause problems.
Does the scss file have to be first introduced into the entrance before the scss can be parsed? In the specific vue, it depends on a certain scss and needs to be introduced separately.
Summarize
The above is the method of introducing style files in Vue introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!