标签: stylus

我有一个大型 Stylus 项目，需要从 vanilla Gulp 移植到 Laravel Mix 中。

其中app.styl包括另一个来自node_modules 的framework.styl内容@import。我无法在 Laravel Mix 中使用use和import标志（或者至少我不知道如何使用），因为

1. 对于某些依赖项，我只需要导入 node_modules 文件夹中的特定文件，而不是整个文件
2. 对于一个依赖项，我需要在导入 Stylus之前在其内部设置一长串变量。

主样式

@import "includes/framework.styl"

/* Other stuff */

包括/framework.styl

$variable = 1.5
$other = white
/* bunch more */

@import "jeet"
@import "foo/src/specific.styl"

ks-no-conflict = true
@import "kouto-swiss"

/* other stuff */

@import中的所有s 都framework.styl来自node_modules。这些依赖项和文件的加载顺序很重要，因为如果加载顺序错误，它们可能会相互冲突。

但是，当我运行时npm run dev，它抱怨无法在 中找到任何依赖项位置framework.styl。

我尝试@import在路径前加上~/, node_modules/ …

我在我的项目中使用了 stylus 和 scss。是否可以拥有一个可以同时使用的通用变量文件？

我努力了：

变量.scss

$primary: #00A9E0

主样式

@import 'variables.scss"

由于语法不同，这显然不起作用

是否有可能（通过 StylusButtonDown 等或替代方案）对触控笔/笔未接触屏幕时发生的按钮按下（即触控笔按钮之一，而不是某些应用程序中的按钮）做出反应，即悬停在空中某处在笔记本的范围内？只有当笔尖实际接触屏幕表面时，这些才会触发。具体来说，我不需要知道按钮的位置。只是在按下桶形按钮时。

我正在使用 Microsoft Surface 和随附的 Surface Pen，如果这有什么不同的话。我不需要它是跨平台的、可移植的或任何东西。事实上，其他语言（C++等）的解决方案也可以。非常欢迎 Hacky 解决方案。

运行 npm run serve 后出现此错误：

in ./src/components/site-checker/insert-model.vue?vue&type=style&index=0&lang=stylus&

Syntax Error: ValidationError: Invalid options object. Stylus Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'preferPathResolver'. These properties are valid:
   object { stylusOptions?, sourceMap?, webpackImporter?, additionalData? }

我在这个框架中使用 VueJS：

【Vue 2】babel、路由器、vuex Vue CLI v4.5.8

我在heroku上运行Expressjs安装,并没有加载样式表.

我点击了ctrl + u然后点击样式表链接,并收到此错误:

TypeError: Object #<SendStream> has no method 'on'
    at Object.static [as handle] (/app/node_modules/express/node_modules/connect/lib/middleware/static.js:75:8)
    at next (/app/node_modules/express/node_modules/connect/lib/proto.js:190:15)

当我转到网址'/stylesheets/style.css'时,我收到此错误:

Express
500 TypeError: Object #<SendStream> has no method 'on'

    at Object.static [as handle] (/app/node_modules/express/node_modules/connect/lib/middleware/static.js:75:8)
    at next (/app/node_modules/express/node_modules/connect/lib/proto.js:190:15)
    at /app/node_modules/stylus/lib/middleware.js:174:46
    at /app/node_modules/stylus/lib/middleware.js:208:20

一切都在当地很好.

这是package.json

  {
    "name": "app-name",
      "version": "0.0.1",
      "private": true,
      "scripts": {
      "start": "node app"
     },
     "dependencies": {
       "express": "3.0.0rc1",
       "jade": "*",
       "stylus": "*"
     }
   }

app.js:

/**
 * Module dependencies.
 */
 var express = require('express')
  , routes = require('./routes') …

我有我的项目,并将一些代码从express2.5.7移植到express3.0.3.我认为它几乎是1:1的转移,但我遇到了一个无法将我的手写笔文件编译到我指定的目录中的问题.这是我的基本app.js设置:

/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path')
  , nib = require('nib')
  , bootstrap = require('bootstrap-stylus')
  , stylus = require('stylus');

var app = module.exports = express();

app.configure('dev', function(){
  var stylusMiddleware = stylus.middleware({
    src: __dirname + '/stylus/', // .styl files are located in `/stylus`
    dest: __dirname + '/public/css/', // .styl resources are compiled `/css/*.css`
    debug: true,
    compile: function(str, path) { // optional, but …

我在文档中找不到使用数组作为变量的示例。尽管显然有数组支持，所以我怀疑我应该以其他方式搜索它。

我已经找到了列表，但是不确定这些列表是否旨在与数组相同或相似的目的，并且找不到语法和示例。

我有一个颜色清单

- cards_colors = #E0137E #8431BF #2388C4 #FED462 #EC633B #B3CF32 #2388C4 #EA8527

我想将每种颜色分配给循环中的相应元素，类似于此：

    for num in (0..10)
        &.card-{num}
            background cards_colors[{num}]

我已经准备好与Stylus,Jade和tiny-lr合作.我的问题是,当我保存一个玉文件时,它开始编译它们全部,因此在我正在处理的文件编译之前,在第一个复制到目标的文件上重新加载火,导致我必须手动刷新.我已经使用"gulp-changed"解决了这个问题,但我似乎无法配置它或其他东西.以前有人有这个问题吗？我发布了我的Gulp文件,所以你可以看看.

可以在此处找到问题的时间线图:https://www.dropbox.com/s/3g37oy25s9mq969/jade_compile_frefresh_problem.png？dl = 0

任何帮助表示赞赏!

    'use strict';

    var gulp = require('gulp');
    var jade = require('gulp-jade');
    var gutil = require('gulp-util');
    var stylus = require('gulp-stylus');
    var jeet = require('jeet');
    var nib = require('nib');
    var uglify = require('gulp-uglify');
    var lr = require('tiny-lr')();
    // var mainBowerFiles = require('main-bower-files');

    // Define sources object
    var sources = {
      jade: "jade/**/*.jade",
      partials: "partials/**/*.jade",
      stylus: "styl/**/*.styl",
      scripts: "js/**/*.js"
    };

    // Define destinations object

    var destinations = {
      html: "dist/",
      css: "dist/css",
      js: "dist/js"
    };

    // …

我需要从Stylus获得以下CSS输出(这是一个向后的方式,但Stylus将使这个项目的许多其他部分更容易).我已经尝试了很多东西但是无法将其编译,当它说它已经编译了这部分输出时没有显示任何内容.我没有任何快乐实现stylus-font-face - npm因为文档似乎没有显示Stylus所需的示例.这是我需要的输出,非常感谢任何帮助.

@font-face {
	font-family:'apercu-regular';
	src: url('../fonts/apercu-regular/Apercu_gdi.eot');
	src: url('../fonts/apercu-regular/Apercu_gdi.eot?#iefix') format('embedded-opentype'),
		url('../fonts/apercu-regular/Apercu_gdi.woff') format('woff'),
		url('../fonts/apercu-regular/Apercu_gdi.ttf') format('truetype'),
		url('../fonts/apercu-regular/Apercu_gdi.svg#apercu-regular') format('svg');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-25CA;
}

我在"探索流星"一书之后建立了我的第一个Meteor添加.

但是现在我遇到了以下错误:

错误:在ian中找不到accounts_ui.styl的插件:accounts-ui-bootstrap-3;*.styl的插件在发布时处于活动状态,但现在没有

我相信这与我目前的手写笔包有关.它目前运行1.0.7并且不允许我更新到最新版本.

更新后我收到此错误:错误:包名称必须包含小写ASCII字母:"2.513.4"

如果我删除并再次添加它也不会安装最新版本.

欢迎任何想法.

干杯,多米尼克