stylus 为啥要加入 ~ @import '~common/stylus/mixin'

最新推荐文章于 2025-06-03 09:11:45 发布

原创最新推荐文章于 2025-06-03 09:11:45 发布 · 6.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #stylus #webpack

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何将Stylus与Webpack集成以实现CSS样式文件的加载与编译。通过配置Webpack的解析选项，可以方便地引入Stylus文件，并支持从node_modules中查找资源。此外还介绍了如何避免扩展名冲突等问题。

仔细查看了stylus的api: https://github.com/shama/stylus-loader

and then require('./file.styl'); will compile and add the CSS to your page.

stylus-loader can also take advantage of webpack's resolve options. With the default options it'll find files in web_modulesas well as node_modules, make sure to prefix any lookup in node_modules with ~. For example if you have a styles package lookup files in it like @import '~styles/my-styles. It can also find stylus files without having the extension specified in the @import and index files in folders if webpack is configured for stylus's file extension.

module: {
  resolve: {
    extensions: ['', '.js', '.styl']
  }
}

will let you have an index.styl file in your styles package and require('styles') or @import '~styles' it. It also lets you load a stylus file from a package installed in node_modules or if you add a modulesDirectories, like modulesDirectories: ['node_modules', 'web_modules', 'bower_components'] option you could load from a folder like bower_components. To load files from a relative path leave off the ~ and @import 'relative-styles/my-styles'; it.

Be careful though not to use the extensions configuration for two types of in one folder. If a folder has a index.js and a index.styl and you @import './that-folder', it'll end up importing a javascript file into your stylus.

相信大家看懂了！