webpack引入stylus

首先是安装对应的预编译器和加载器

npm install --save-dev stylus stylus-loader

然后去webpack.config.js的module中去配置
开发(dev)环境下

{
      test: /\.styl(us)?$/,
      loader:'style-loader!css-loader!stylus-loader'
},

生产(prod)环境下
先安装

npm install --save-dev extract-text-webpack-plugin

这个插件主要是让css文件单独打包引入到页面中。在配置文件中引入

const ExtractTextPlugin = require('extract-text-webpack-plugin');

在配置的plugins下添加

new ExtractTextPlugin({
      filename:'[name].[hash].css',//随机名称
      allChunks:true
})

在配置文件的module下添加

{
      test: /\.styl/,
      include: /src/,
      use: ExtractTextPlugin.extract({
           fallback: 'style-loader',
           use: [
                'css-loader',
                'stylus-loader'
           ]
      })
},

到这里就引入完成了
如果html中引入需要在style标签中添加lang="stylus"

<style lang="stylus"></style>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 什么是webpack: webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScrip...
    不去解释阅读 834评论 0 2
  • section-3.1 Tree Shaking 概念详解 当引入一个模块的时候,只引入需要的代码,而不是所有的代...
    羽晞yose阅读 635评论 0 1
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,360评论 4 31
  • 全局安装webpack 全局安装webpack会有个问题,就是当你有两个项目依赖于不同版本的webpack,就会有...
    説好的妹紙呢阅读 1,913评论 0 11
  • # 前端工程化   近几年来,前端领域飞速发展,前端的工作早已不再是切几张图,写几个页面那么简单,项目比较大时,很...
    果汁凉茶丶阅读 3,578评论 0 12