WebPack详细入门教程(七)之css和sass的处理
webpack引入css
安装依赖 npm install --save-dev css-loader style-loader
//main.js中引入.css文件
require('../css/index.css'); 或 import '../css/index.css';
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + '/demo/js/main.js',
output: {
filename: 'index.js',
path: __dirname + '/out'
},
module: {
rules: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
}
}
rules是一个数组,指定多个Rule,Rule.loader 是 Rule.use: [ { loader } ] 的简写
webpack引入sass
安装依赖 npm install --save-dev sass-loader
//main.js中引入.scss文件
require('../css/index.scss'); 或 import '../css/index.scss';
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + '/demo/js/main.js',
output: {
filename: 'index.js',
path: __dirname + '/out'
},
module: {
rules: [
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
}
]
}
}
本文作者:猫老板的豆
本文链接:https://www.cnblogs.com/bingcola/p/16499288.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步