@Wangww0925 2020-08-03T02:52:58.000000Z 字数 2691 阅读 312

stylus 使用【grunt将styl转css、vue使用styl】

Vue_CLI css预处理器_stylus

stylus 使用【grunt将styl转css、vue使用styl】
下载demo
使用grunt将styl转css
Vue中使用stylus

下载demo

打开test.html页面

使用grunt将styl转css

参考.styl 转 .css

注意：文件目录（路径以根目录开始）

1、目录结构

stylus_demo
    |-| src
        |--| css
            |---| test.css (使用grunt生成的)
        |--| stylus
            |---| test.styl (内容根据实际来)
        |--| test.html
    |-| Gruntfile.js  (grunt配置文件)
    |-| package.json
    |-| package-lock.json

2、文件内容

test.styl

/**********************************继承************************************/
    .positionCenter
        position:absolute
        top:50%
        left:50%
        vendor('transform',translate(-50%,-50%))
/**********************************定义函数********************************/
    /*
     * vendor('border-radius',5px)
     * vendor('box-shadow',0px 0px 1px 2px #333)
     * vendor('transform',translate(-50%,-50%))
     */
    vendor(prop, n)
        -webkit-{prop}:n
        -moz-{prop}:n
        -ms-{prop}:n
        -o-{prop}:n
        {prop}:n
/**********************************主体内容********************************/
.positionTop
    @extend .positionCenter
    width:100px
    height:100px
    background-color:red
    color:#fff
    text-align:center
    line-height:100px
.div
    line-height:30px
    color:red
    &:hover
        color:blue

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./css/test.css">
</head>
<body>
    <div class="positionTop">定位</div>
    <div class="div">11111111111</div>
</body>
</html>

3、根目录新建 Gruntfile.js 文件

module.exports = function(grunt) {
    grunt.initConfig({   // 任务配置,所有插件的配置信息
        pkg: grunt.file.readJSON('package.json'),
        stylus:{
            build: {
                options: {
                    linenos: false,
                    compress: true
                },
                files: [{
                    'src/css/test.css': ['src/stylus/test.styl']    // 将test.styl转成test.css
                }]
            }
        },
        watch: {   // watch插件的配置信息
            another: {
                files: ['src/css/*','src/stylus/*.styl'],
                tasks: ['stylus'],
                options: {
                    livereload: 1337
                }
            }
        }
    });
    // 告诉grunt我们将使用插件
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-stylus');
    // 告诉grunt当我们在终端中输入grunt时需要做些什么  根据情况使用
    grunt.registerTask('default', ['watch']);   // 监听.styl文件更改，并转换
};

3、下载依赖

& npm init  // 创建项目
& npm install grunt  // 下载grunt
& npm install grunt-contrib-stylus  // .styl 转 .css
& npm install grunt-contrib-watch  // 监听指定的.styl

4、运行Gruntfile.js，执行命令`grunt`

执行命令之后会发现多了 src/css/test.css文件

5、打开test.html页面

Vue中使用stylus

1、安装stylus：

npm install stylus --save-dev
npm install stylus-loader --save-dev

2、引入

方法一：在.vue文件中使用stylus标签

例：在style标签加上 lang="stylus"

<style scoped lang="stylus">
    .avatar
        float: left;
        width: 300px;
    img
      width: 60px;
      height: 60px;
      display: inline-block;
      border-radius: 30px;
</style>

方法二：在.vue文件中引用.styl文件

<style lang="stylus">
    @import "~@/assets/stylus/common.styl";
</style>

vue补充（内部style调用外部.styl文件）

assets/stylus/base.styl

p(n)
    padding: n;

.vue文件

<template>
    <div id="contentBg>stylus使用</div>
</template>
<style lang="stylus">
    @import "~@/assets/stylus/base.styl";
    #contentBg
        p(50px 30px);
</style>