首先是安装对应的预编译器和加载器
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>