在vue项目中使用SCS的方法和步骤

一.概述

随着sass/less等css预处理程序的出现，编写css变得越来越有趣。所以现在越来越多的人喜欢在项目中或多或少地使用SCS。我自己也是。我最近在写一个vue项目。所以我在博客里写项目写作的时候，每天都会写一些知识点。所以最近的博客应该都和vue有关。今天想和大家分享的是如何在vue项目中引入SCS(less的介绍也差不多)

Scss被引入两个vue

2.1真空装载机

在讨论如何在vue项目中使用SCS之前，我们先简单了解一个概念，那就是vue-loader。什么是vue-loader？vue加载器实际上是一个webpack加载器。用于将vue组件转换为可部署的js、html和CSS模块。因此，如果我们想在vue项目中使用SCS，我们必须告诉vue-loader如何解析我的SCS文件。

不懂webpack的同学可以先去百度一下。我会在这里放一张照片。看完之后，大家就能知道webpack能做什么了。

2.2装载机配置

在webpack中，所有的预处理程序都必须匹配相应的加载程序。vue-loader是否允许其他webpack-loader处理部分组件，然后根据lang属性自动确定使用哪些加载器。因此，实际上只需要安装用于处理sass/SCS的加载程序。SCS可用于vue。

现在让我们安装sass/scss加载程序

为什么NPM安装sass-loader节点-sass-save-dev 2.3不需要配置

如前所述，vue-loader允许您根据lang属性自动确定使用哪些加载器。它是怎么做到的？有这么神奇吗？让我们来看看核心部分的源代码

exports . cssLoader=function(options){ options=options | | { } var cssLoader={ loader : ' CSS-loader '，options 3360 { minimize : process . ENV . node _ ENV==' production '，source map : options . source map } }//生成要与extract text plugin函数generateLoaders (loader，loader options){ var loaders=[cssLoader]if(loader){ loader(push)({ loader : loader '-loader '，options 3333330。concat(Loaders)} }//https://vue-loader.vuejs.org/en/configurations/extract-css.html返回{ css: generateLoaders()、postcss: generateLoaders()、less : generateladers(' less ')、sass : generateladers(' sass '、{ indentedSyntax: true })、SCS : generateladers(' sass ')、stylus: generateLoaders('手写笔')、stylus: generateLoaders('手写笔')} }它是

2.4使用scss

这样，你就可以愉快地使用SCS了。

style scoped lang=' sass '