Nodejs样式预处理模块stylus的使用

Nodejs样式预处理模块stylus的使用
Stylus 是一个非常强大的 CSS 预处理器，它允许你使用变量、混合宏（mixins）、函数等特性来编写更简洁、更易于维护的样式表。在 Node.js 环境中，你可以使用 stylus 模块来编译 Stylus 代码到 CSS。

安装

首先，你需要安装 stylus 和 nib（可选，用于提供一些有用的 CSS3 混合宏）：

npm install stylus nib --save

基本用法

以下是一个简单的例子，展示如何在 Node.js 中使用 Stylus 编译器：

  1. 创建一个 Stylus 文件（例如 styles.styl）：
// styles.styl
$base-color = #4d90fe

body
  font 12px Helvetica, sans-serif
  color $base-color
  1. 使用 Node.js 来编译这个文件：
const stylus = require('stylus');

function compile(str, path) {
  return new Promise((resolve, reject) => {
    stylus(str)
      .set('filename', path)
      .render((err, css) => err ? reject(err) : resolve(css));
  });
}

compile(`
$base-color = #4d90fe

body
  font 12px Helvetica, sans-serif
  color $base-color
`, 'styles.styl')
.then(css => {
  console.log(css);
})
.catch(err => {
  console.error(err);
});

使用 nib

如果你想要使用 nib 提供的混合宏，可以这样设置：

const stylus = require('stylus');
const nib = require('nib');

function compile(str, path) {
  return new Promise((resolve, reject) => {
    stylus(str)
      .use(nib())
      .set('filename', path)
      .render((err, css) => err ? reject(err) : resolve(css));
  });
}

compile(`
@import 'nib'

border-radius(5px)
`, 'styles.styl')
.then(css => {
  console.log(css);
})
.catch(err => {
  console.error(err);
});

直接编译文件

如果你想直接编译一个 Stylus 文件到 CSS 文件，可以使用如下方法：

const fs = require('fs');
const stylus = require('stylus');

fs.readFile('styles.styl', 'utf8', (err, str) => {
  if (err) throw err;

  stylus(str)
    .set('filename', 'styles.styl')
    .render((err, css) => {
      if (err) throw err;
      fs.writeFile('styles.css', css, err => {
        if (err) throw err;
        console.log('编译完成!');
      });
    });
});

以上就是如何在 Node.js 中使用 Stylus 的基本步骤和示例。通过这些基础，你可以开始探索更多 Stylus 的高级功能，如条件语句、循环、嵌套选择器等。


3 回复

当然，没问题！Stylus 是一个灵活、富有表现力的 CSS 预处理器。在 Node.js 中使用 Stylus，你需要先安装它：

npm install stylus --save

然后你可以这样使用它：

const stylus = require('stylus');

function compile(str) {
  return new Promise((resolve, reject) => {
    stylus(str)
      .set('filename', 'example.styl')
      .render((err, css) => err ? reject(err) : resolve(css));
  });
}

compile(`
  .button
    background-color: #4CAF50 /* Green */
    border: none
    color: white
    padding: 15px 32px
    text-align: center
    text-decoration: none
    display: inline-block
    font-size: 16px
`)
.then(css => console.log(css))
.catch(err => console.error(err));

这段代码会将 Stylus 代码编译成普通的 CSS。希望这能帮到你，如果还有其他问题，欢迎随时提问！


Stylus 是一个灵活且功能强大的 CSS 预处理器，可以让你以更简洁、更有条理的方式编写样式。使用 Stylus 可以让CSS更具扩展性和维护性。在 Node.js 环境下，你可以通过 npm 安装 stylus 并将其集成到你的项目中。以下是使用 Stylus 的基本步骤：

1. 安装 stylus

首先，你需要安装 stylus 包。你可以通过 npm 安装 stylus 和 nib（一个可选的 Stylus 插件库）。

npm install stylus --save
npm install nib --save

2. 基本使用

你可以创建一个 JavaScript 文件来编译 Stylus 文件为 CSS。

示例：app.js

var stylus = require('stylus');

function compile(str, path) {
    return stylus(str)
        .set('filename', path)
        .use(nib()); // 使用 nib 扩展
}

// 编译 Stylus 字符串
var css = compile(`
    @import 'nib'
    
    body
        font-family: Arial, sans-serif
        background-color: #f0f0f0
`, 'styles.styl').render(function (err, css) {
    if (err) throw err;
    console.log(css);
});

3. 使用 Gulp 或 Webpack 进行自动化处理

对于大型项目，手动编译每次更改的 Stylus 文件是不现实的。因此，通常会将 Stylus 的编译过程集成到构建工具中，如 Gulp 或 Webpack。

使用 Gulp：

首先安装 gulp-stylus 包：

npm install gulp-stylus --save-dev

然后配置 Gulpfile.js：

var gulp = require('gulp');
var stylus = require('gulp-stylus');

gulp.task('styles', function () {
    return gulp.src('./styles/**/*.styl')
        .pipe(stylus({
            use: [require('nib')()]
        }))
        .pipe(gulp.dest('./public/css'));
});

gulp.task('default', ['styles']);

使用 Webpack：

首先安装 webpack 和 style-loader、css-loader、stylus-loader：

npm install webpack style-loader css-loader stylus-loader --save-dev

然后配置 webpack.config.js：

module.exports = {
    module: {
        rules: [
            {
                test: /\.styl$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'stylus-loader'
                ]
            }
        ]
    }
};

这些配置文件和代码示例展示了如何开始使用 Stylus 在 Node.js 环境中进行样式预处理。根据项目的具体需求，你可以进一步探索和调整。

Stylus 是一个CSS预处理器，可以让你更高效地编写样式表。在Node.js环境中使用Stylus，首先需要安装它：

npm install stylus --save

然后，在你的项目中引入并使用Stylus：

var stylus = require('stylus');

function compile(str, path) {
  return stylus(str)
    .set('filename', path);
}

// 使用例子
compile(`
  @import 'b.styl'
  div
    color red
`, 'path/to/styles');

你可以通过此方法编译Stylus代码为CSS。此外，还可以配置更多选项如压缩CSS等。

回到顶部