Method: First install the [node-sass and sass-loader] dependencies; then open the [webpack.base.conf.js] file and add scss rules in the rule; finally in [< /style>】Write the scss style in the tag. </p></blockquote> <p><img src="https://img.php.cn/upload/article/000/000/024/5fbb18d45ff2d696.jpg" alt="How to write scss in .vue file?" ></p> <p>The operating environment of this tutorial: Windows 7 system, Vue version 2.9.6. This method is suitable for all brands of computers. </p> <p style="white-space: normal;"><span style="font-size: 18px;"><strong>Using scss in vue projects</strong></span></p> <p><strong>1. First install dependencies</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>npm install node-sass sass-loader --save-dev</pre><div class="contentsignin">Copy after login</div></div> <p><strong>2. Find <code>webpack.base.conf.js</code> in <code>build</code>, and add <code>scss</code>rules<code></code> to </strong>rules</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>{ test: /\.scss$/, loaders: ['style', 'css', 'sass'] }</pre><div class="contentsignin">Copy after login</div></div> <h5>3. Use </h5> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><style lang='scss'> Copy after login in the vue file to introduce scss into the vue project globally 1. Global reference You need to install sass-resources-loader npm install sass-resources-loader --save-devCopy after login 2. Modify utils.js## in build #Change scss: generateLoaders('sass')Copy after login to scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { //你自己的scss全局文件的路径 resources: path.resolve(__dirname, '../src/style/common.scss') } } )Copy after login Related recommendations: 2020 Summary of front-end vue interview questions (With answers) vue tutorial recommendation: The latest 5 vue.js video tutorial selections in 2020 More programming-related knowledge, Please visit: Introduction to Programming! !
