vue 使用less或scss

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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。