开启辅助访问 充值VIP充值豆豆
QQ登录 自动登录 注册 找回密码
小白基地 行业资讯 javaScript教程 查看内容

webpack中怎样抽离css样式

2018-12-4 15:28| 发布者: 从前有座山| 查看: 889| 评论: 0|原作者: adminm|来自: 小白基地

摘要: 这次给大家带来webpack中怎样抽离css样式,webpack中抽离css样式注意事项有哪些,下面就是实战案例,一起来看一下。
这次给大家带来webpack中怎样抽离css样式,webpack中抽离css样式注意事项有哪些,下面就是实战案例,一起来看一下。

npm install extract-text-webpack-plugin --save-dev # for webpack 2 npm install --save-dev extract-text-webpack-plugin # for webpack 1 npm install --save-dev extract-text-webpack-plugin@1.0.1首先进入项目的根目录,然后执行以上命令进行插件的安装,插件安装完成后,接下来我们要做的就是在webpack.config.js中引入该插件

const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { module: { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) } ] }, plugins: [ new ExtractTextPlugin("styles.css"), ] }const ExtractTextPlugin = require('extract-text-webpack-plugin'); // Create multiple instances const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css'); const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css'); module.exports = { module: { rules: [ { test: /\.css$/, use: extractCSS.extract([ 'css-loader', 'postcss-loader' ]) }, { test: /\.less$/i, use: extractLESS.extract([ 'css-loader', 'less-loader' ]) }, ] }, plugins: [ extractCSS, extractLESS ] };该插件有三个参数意义分别如下

  1. use:指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader

  2. fallback:编译后用什么loader来提取css文件

  3. publicfile:用来覆盖项目路径,生成该css文件的文件路径

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

ElTableColumn如何自定义内容


小程序开发分享页面后返回首页以上就是webpack中怎样抽离css样式的详细内容,更多请关注php中文网其它相关文章!


鲜花

握手

雷人

路过

鸡蛋

本站资源全部来自网络和网友分享,如有侵犯您的权益,请联系网站QQ,或发邮件至sibida@foxmail.com。本网站尊重知识产权,无意侵犯知识产品,如有,联系网站人员,会第一时间删除!

小白基地,是小白资源网的官方网站,思必达学院官网,提供最新的创业技术支持与创业资讯,提供最新的思必达教程。是IT小白网友学习资源分享基地,中国互助创业资源网。提供诸如JAVA、PHP、MySQL、ASP、C语言等各类程序开发的教程资源。

返回顶部
鞋子货源 服装货源一件代发 美容护肤品货源