标签：div ash fun lin orm conf 文件中 字符串 处理
webpack是以js文件为入口打包的，那么项目的css怎么办？如何引入？
css可以通过js文件引入，但必须使用想用的loader 1、css-loader，让 css 可以被 js 正确的引入 2、style-loader，让 css 被引入后可以被正确的以一个 style 标签插入页面 3、两者的顺序很重要，要先经过css-loader处理，再有style-loader处理
1、js文件中引入css文件
import test from "./test.css";
2、webpack.config.js设置
module:{ rules: [ { test:/\.less$/, use:[ //loader的执行顺序是从后往前的 { loader: ‘style-loader‘ },{ loader: ‘css-loader‘ } ] } ] }
style-loader的核心配置
都是以style标签插入到head中，，<head><style></style></head>中 1、insertAt style标签插入在哪一块区域 2、insertInto 插入指定的dom 3、singleton 是否合并为一个style标签 4、transform 浏览器环境下，插入style到页面钱，用js对css进行操作
insertAt -- 通常不去指定 直接设置为：top/bottom（头部的上/下），也可以设置为对象 options:{ insertAt: ‘top‘,‘bottom‘ }
insertInto options:{ insertAt: { insertInto: ‘#id‘ } }
singleton options:{ insertAt: { insertInto: ‘#id‘， sinleton: true //多个style标签合为一个 } }
transform -- 指定使用哪个js文件对css进行修改 options:{ insertAt: { insertInto: ‘#id‘， sinleton: true， transform: ‘./transform.js‘ } }
transform.js module.exports=function(css){ //css参数代表了css的所有内容 if(window.screen.width<500){ css=css.replace(‘red‘,‘yellow‘); //css是字符串，所以只能对其进行字符串的操作 ，，，不太方便 } return css; }
css-loader 核心配置
minimize 是否压缩css -- 去掉空格，换行，webpack4.0已经移除，推荐使用uglify进行压缩 module 是否使用css模块化 -- 类似less，sass，可以使用模块的方式去写css，而不是非要用less等 alias css中的全局别名 --webpack4.0已经移除
{ loader: ‘css-loader‘, options: { // module: true //使用模块化 module: { localIdentName: ‘[path][name]_[local]_[hash:4]‘ //类名会被编译，起个别名 path-路径 name-文件名 local-本来的类名 } } }
标签：div ash fun lin orm conf 文件中 字符串 处理
原文地址：https://www.cnblogs.com/slightFly/p/12293408.html
