webpack引入stylus 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' ] }) },

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

webpack引入stylus