标签：scss vue sass less loader stylus css

ess，scss和stylus都是css的预处理器，首先我们要明白我们为什么要使用less，scss和stylus，因为css只是一种标记语言，其中并没有函数变量之类的，所以当写一些复杂样式的时候存在局限性，不灵活，而less，scss和stylus正好弥补了css的这些局限，让css可以更灵活的编写样式，所以运用scss就不需要像写css时队友的语法需要做hack处理。scss 是 sass 3 引入新的语法，其语法完全兼容 css3，并且继承了 Sass 的强大功能。也就是说，任何标准的 css3 样式表都是具有相同语义的有效的 scss 文件。

1.less的使用

• 命令：

npm install less less-loader --save

• less在组件内使用

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

• 修改webpack.config.js文件。vue.cli 搭建项目可跳过此步

{

test: /\.less$/,

loader: "style-loader!css-loader!less-loader",

},

2.scss的使用

• 安装命令

npm install node-sass sass-loader style-loader --save

• scss在组件内的使用

<style lang="scss" scoped></style>

• 修改webpack.config.js文件

{
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
},

• 注:组件内，设置<style lang='scss'>。scss与sass只是 语法规范不一样，具体 使用可根据个人习惯。

3.stylus的使用

• 命令

npm i stylus stylus-loader -s

• stylus在组件内的使用

<style lang="stylus" scoped>
</style>

作者：菲儿_cdd4
链接：https://www.jianshu.com/p/bd8ab8308097
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

标签：scss,vue,sass,less,loader,stylus,css
来源： https://www.cnblogs.com/zhyp/p/16151800.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。