标签: stylus

Stylus CSS预处理器很棒但是因为我以前在Netbeans中编码,所以没有颜色突出显示很难编码.是否有适用于Stylus的Netbeans插件？如果有的话,那将是完美的!

谢谢

我的app.coffee看起来像这样:

connect = require 'connect'
express = require 'express'
jade = require 'jade'
stylus = require 'stylus'

app = express.createServer()

# CONFIGURATION

app.configure(() ->
  app.set 'view engine', 'jade'
  app.set 'views', "#{__dirname}/views"

  app.use connect.bodyParser()
  app.use connect.static(__dirname + '/public')
  app.use express.cookieParser()
  app.use express.session({secret : "shhhhhhhhhhhhhh!"})
  app.use express.logger()
  app.use express.methodOverride()
  app.use app.router

  app.use stylus.middleware({
    force: true
    src: "#{__dirname}/views"
    dest: "#{__dirname}/public/css"
    compress: true
  })
)

# ROUTES

app.get '/', (req, res) ->
  res.render 'index',
    locals:
      title: 'Title'

# SERVER

app.listen(1234)
console.log "Express server listening …

最近我使用Vuetify开发了一个应用程序,并且无法更改Vuetify的默认颜色.所以我最终以此结束:

https://github.com/vuetifyjs/vuetify/issues/299

正如它所说,我添加了以下代码:

 <style lang="stylus">
  @require '../node_modules/vuetify/src/stylus/settings/_colors.styl'
  $theme := {
    primary: #009688
    accent: #FFC107
    secondary: #00796B
    info: #B2DFDB
    warning: $red.base
    error: $red.base
    success: $green.base
  }
  @require '../node_modules/vuetify/src/stylus/main.styl'
</style>

在App.vue中

因此,当我在应用程序中测试更改颜色时,它按预期工作,到目前为止一切顺利.然后我注意到它改变了图标的大小,如下图所示:

之前

后

所以,我的问题是:

有没有办法通过不使用CSS来解决这个问题？如果是这样,怎么样？或者,如果没有办法,那么我应该如何使用CSS解决它？

我想使用 Vuetify 的 CSS 类作为混合。为此，我正在使用@extendsStylus 指令。在MyComponent.vue：

<style scoped lang="styl">
.title {
  @extends .display-3;
}
</style>

正如你所看到的，我没有在每个组件的样式中引入 Vuetify。为了完成这项工作，我将 webpack 配置为在我的应用程序的每个 Stylus 块中加载 Vuetify 的 Stylus 样式。在webpack.config.js：

module.exports = {
  /* ... */
  plugins: [
    /* ... */
    new webpack.LoaderOptionsPlugin({
      options: {
        stylus: {
          import: path.join(
            __dirname,
            'node_modules/vuetify/src/stylus/main.styl',
          ),
        },
      },
    }),
  ],
};

但是 Vuetify 的文档说清楚：

不要在组件内导入 main.styl。这将导致性能问题并大大减慢热模块重新加载。

看起来我通过这种方式配置 webpack 违反了这个规则。在任何组件上应用每个更改现在大约需要五秒钟。我认为这是因为 Vuetify 正在每个组件中重建。

有没有一种方法可以将 Vuetify 的 Stylus 样式用作 mixin，而无需在每个组件上重建 Vuetify？

如何在一个文件中定义多个媒体查询？

我有这个.styl文件:

@media (min-width: 980px)
  body
    padding-top 60px

@media (min-width: 768px)
  body
    .container
      width 768px

这给了我错误expected "indent", got "newline".将它们放在单独的文件中并拥有一个文件包括其他工作.但是当我将它们放在同一个文件中并且第二个文件导入这个文件时它会失败.

更新:文件的代码可以在这里找到:

• https://github.com/mastoj/NodeJsExpressFun/blob/master/public/stylesheets/style.styl
• https://github.com/mastoj/NodeJsExpressFun/blob/master/public/stylesheets/nblog.styl

我有一堆Stylus文件'./styles/stylus/**.styl'和一堆CSS文件'./styles/css/**.css'.

如何使用Gulp编译Stylus文件,将结果与所有CSS文件连接并输出到'./styles/out.css'？

让我说我有 home.styl menu/ menu.styl image.svg

home.styl 从入口点或JS需要.

然后:

home.styl进口menu/menu.styl menu/menu.styl有url(image.svg).

问题是image.svg找不到.

它存在于同一文件夹中menu.styl,但未解析.

装载机是: loaders: [{ test: /\.styl$/, loader: 'style!css!stylus' }, { test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/, loader: 'file?name=[path][name].[ext]' }]

以下是我的想法,为什么失败.希望得到如何解决这个问题的答案.

===========

如果url(image.svg)需要menu.styl,应该在文件夹中查找menu.styl.那是因为路径默认是相对的.

但是发生的事情如下:

1. Stylus-loader处理所有styl,将导入加入一个大的css
2. CSS-loader获取css根上下文,即目录home.styl
3. 然后CSS-loader解析了url(...)相对于上层上下文的所有路径.

因此,在文件夹中搜索图像home.styl而不是menu.styl.

如何解决？

PS示例项目仓库位于https://github.com/iliakan/stylus-path-problem

我有一个名为“quasar.styl”的文件：

@import './quasar.variables'
@import '~quasar-styl'

当它被 webpack 使用 styl-loader 处理时，我收到以下错误：

failed to locate @import file ~quasar-styl.styl

我有这种感觉，关于手写笔有些东西我不明白。它会在哪里寻找文件“~quasar-style”？

该文件来自一个正在运行的样板类星体应用程序，并且应用程序目录中的任何位置都没有调用的文件quasar-style，尤其是node_modules，这是我收集波浪号告诉它要查看的地方。

有任何想法吗？

更新：我在这里上传了类星体样板项目： https ://repl.it/@jmbldwn/Quasar-Boilerplate-2

它无法在 repl.it 上运行，因为它需要 quasar-cli，但您可以在那里看到它生成的所有文件。

例如

.some-class
  position absolute
  left max(0px, 20vh - 100px)

我的意图是致电https://developer.mozilla.org/en-US/docs/Web/CSS/max

但由于http://stylus-lang.com/docs/bifs.html#mina-b，在这种情况下，“左”将始终是“0px”

我该如何解决它？

在SASS中：

.DocumentationArticle

  $DocumentationArticle-Heading__TopLevel--Selector: null

  &-Heading
    &__TopLevel
      $DocumentationArticle-Heading__TopLevel--Selector: &
    &__Section
      @debug($DocumentationArticle-Heading__TopLevel--Selector) // OK: ".DocumentationArticle-Heading__TopLevel"

在 Stylus 中，变量值已更改，此更改仅在更改的范围内可见：

.DocumentationArticle

  DocumentationArticle-Heading__TopLevel--Selector = null

  &-Heading
    &__TopLevel
      DocumentationArticle-Heading__TopLevel--Selector = selector()
    &__Section
      warn(DocumentationArticle-Heading__TopLevel--Selector) // null!

如何使DocumentationArticle-Heading__TopLevel--Selector新值在&__Section范围内可见？

小提琴