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"


你可能感兴趣的:(webpack引入stylus)