分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

webpack.config.js====CSS相关:::css加载器

发布时间:2023-09-06 02:30责任编辑:傅花花关键词:jsCSSwebpack

1. 安装:

//loader加载器加载css和sass模块cnpm install style-loader css-loader node-sass sass-loader --save-dev//loader加载器加载css和less模块cnpm install style-loader css-loader less less-loader --save-dev//样式抽离文件 如果是webpack4.X 需要加@next//现在webpack4.x支持mini-css-extract-plugin插件,但是目前不稳定cnpm install --save-dev extract-text-webpack-plugin@nextcnpm install --save-dev mini-css-extract-plugin

2. webpack.config.js中使用

const extractTextWebpackPlugin = require(‘extract-text-webpack-plugin‘);let cssExtract = new extractTextWebpackPlugin({ ???filename: ‘css/index.css‘, ???disable: false});let sassExtract = new extractTextWebpackPlugin({ ???filename: ‘css/public.css‘, ???disable: false});
 ???????rules: [ ???????????//配置css加载器 ???????????{ ???????????????test: /\.css$/, ???????????????use: cssExtract.extract({ ???????????????????fallback: "style-loader", ???????????????????use: ["css-loader", "postcss-loader"] ???????????????}) ???????????}, ???????????//配置sass加载器 ???????????{ ???????????????test: /\.scss$/, ???????????????use: sassExtract.extract({ ???????????????????fallback: ‘style-loader‘, ???????????????????use: [‘css-loader‘, "postcss-loader", ‘sass-loader‘] ???????????????}) ???????????}, ???????]

webpack.config.js====CSS相关:::css加载器

原文地址:https://www.cnblogs.com/songxia/p/10295830.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved