用stylus将styl文件直接转换成css文件

大家好，欢迎来到IT知识分享网。

前言

相信许多程序员在写web的样式时，会新建css文件来分离html和style 可是在写css文件时，一旦遇到子元素的部分样式和父元素不同时，就需要另起一行写子元素的样式，有没有一种更快的方式，是css的写法更加快捷、方便呢， 我们就要提到stylus了。

准备工作

本次我们会使用stylus去写css样式，接下来就是将styl文件转换成css文件的方法

命令行工具

1. 全局安装Stylus编译器：首先确保你已经安装了Node.js，然后在命令行中运行以下命令来全局安装Stylus：

1npm install -g stylus

1. 编译单个文件：安装完成后，你可以通过命令行直接将Stylus文件转换为CSS。例如，如果你有一个名为input.styl的文件，想要将其编译为output.css，可以在该文件所在的目录下运行：

1stylus input.styl -o output.css

1. 监听文件变化自动编译：如果你想在每次编辑Stylus文件后自动重新编译CSS，可以加上-w或–watch参数：

1stylus -w input.styl -o output.css

集成开发环境（IDE）支持

大多数现代IDE（如Visual Studio Code、WebStorm等）都提供了通过插件或内置功能支持Stylus编译的功能。通常，你可以在IDE的设置中配置文件监视器（File Watcher），使其在Stylus文件保存时自动编译为CSS。

构建工具集成

如果你的项目使用了构建工具如Gulp、Grunt或Webpack，你可以通过相应的插件来集成Stylus编译过程到构建流程中。例如，在Webpack中，你可以使用stylus-loader。

Vue.js项目中使用

对于基于Vue.js的项目，如果你使用了Vue CLI，可以通过配置vue.config.js来添加对Stylus的支持。Vue CLI默认支持Stylus，但你可能需要安装额外的依赖，如stylus-loader和stylus，并在配置文件中添加对应的规则。

示例配置（Vue CLI）:

Js 1// vue.config.js 2module.exports = { 3 css: { 4 loaderOptions: { 5 stylus: { 6 additionalData: `// 在这里可以导入全局变量或mixins 7 @import "~@/styles/variables.styl";`, 8 }, 9 }, 10 }, 11};

确保已经安装了必要的依赖：

Sh 1npm install stylus stylus-loader --save-dev

以上方法可以帮助你根据不同的场景和需求将Stylus文件转换为CSS文件。

styl文件格式

在使用前，我们先了解一下为什么用styl文件写样式，而不是css文件

• stylus css 超集，支持预编译 省事{}:;都不需要了，取而代之的是tab 缩进 用的是编译后的css文件 就比如在css中要写

*{ margin: 0px; padding: 0px; }

在styl中只用,只要用tab和空格就可以

* margin 0 padding 0

更者 在写父样式中的子样式时，用css 如果子样式中存在不同的要求,就需要写两个

body{ magin: 0px; padding: 0px; background-color:black; } body .box{ magin: 0px; padding: 0px; background-color:white }

而在styl中 只需要

body magin: 0px; padding: 0px; background-color:black; .box magin: 0px; padding: 0px; background-color:white

在做好准备工作后，我们另创建一个文件，就在集成终端输入
‘stylus -w 11.styl -o 11.css’
这就是创建成功，直接在styl文件里输样式

接下来就可以在styl文件中写入你喜欢的样式，每次写完按下Ctrl+s键保存，就会自动在css文件里展现出来了