加载CSS文件
//加载CSS文件
npm install --save-dev style-loader css-loader
css-loader: 辅助解析 js 中的 import "../css/index.css" ;(webpack不能解析css文件,需要借助于loader解析css代码)
style-loader: 把 js 中引入的 css 内容 注入到 html 标签中,并添加 style 标签。
//webpack.config.js
const path = require("path");
module.exports = {
mode: "development",
entry: "./src/js/index.js",
output: {
path: path.resolve(__dirname,"dist"),
filename: "main.js"
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'] //从后往前执行,先用css-loader解析css,在用style-loader把样式注入到style标签里
}
]
}
}
//index.js
import "../css/index.css";
function createDomElement() {
var dom = document.createElement('div');
dom.innerHTML = '有勇气改变可以改变的,有胸怀接受不可改变的,有智慧分辨两者的不同';
dom.className = "box";
return dom;
}
document.body.appendChild(createDomElement());
console.log("syy");
/* index.css */
.box{
background: #f00;
}
执行npx webpack进行构建
手动将main.js引入到index.html后,预览index.html,发现css-loader已解析成功,样式成功呈现。
打开控制台,会发现样式注入到了style中:
加载scss原理基本相同:
//加载Sass文件
npm install sass-loader node-sass --save-dev
//CSS3自动添加前缀
npm i postcss-loader autoprefixer -D
//webpack.config.js
const path = require("path");
module.exports = {
mode: "development",
entry: "./src/js/index.js",
output: {
path: path.resolve(__dirname,"dist"),
filename: "main.js"
},
module: {
rules: [
{
test: /\.(sc|c|sa)ss$/,
use: [
'style-loader',
{
loader: "css-loader",
options: {//sourceMap作用是,可以在控制台的样式里看到样式对应的文件,方便调试,截图如下
sourceMap: true,
insertAt:'top' //打包后,位置在style的最上面
}
},
{
loader: 'postcss-loader', //自动添加css3前缀
options: {
ident: 'postcss',
sourceMap: true,
plugins: loader => [require('autoprefixer')({ overrideBrowserslist: ['> 0.15% in CN'] }) // 添加前缀
]
}
},
{
loader: "sass-loader",
options: {
sourceMap: true
}
}//从后往前执行,先用sass-loader解析scss,再用style-loader把样式注入到style标签里
]
}
]
}
}
入口文件index.js引入index.scss后,执行npx webpack,刷新,页面样式变化:
特别说明,为了方便调试,配置sourceMap,配置后与配置前控制台对比:
对应的css/scss文件内容:
//index.css
.box{
background: #f00;
}
//index.scss
$height:100px;
.box{
height: $height;
}
综上所述职,webpack打包css/scss文件,完整的配置如下:
//webpack.config.js
const path = require("path");
module.exports = {
mode: "development",
entry: "./src/js/index.js",
output: {
path: path.resolve(__dirname,"dist"),
filename: "main.js"
},
module: {
rules: [
{
test: /\.(sc|c|sa)ss$/,
use: [
'style-loader',
{
loader: "css-loader",
options: {//sourceMap作用是,可以在控制台的样式里看到样式对应的文件,方便调试,截图如下
sourceMap: true
}
},
{
loader: 'postcss-loader', //自动添加css3前缀
options: {
ident: 'postcss',
sourceMap: true,
plugins: loader => [require('autoprefixer')({ overrideBrowserslist: ['> 0.15% in CN'] }) // 添加前缀
]
}
},
{
loader: "sass-loader",
options: {
sourceMap: true
}
}//从后往前执行,先用sass-loader解析scss,再用style-loader把样式注入到style标签里
]
}
]
}
}