内容简介:或
sass-loader
> css-loader
> style-loader
(以 <style>
标签形式添加到 html 中)
或
sass-loader
> file-loader
> style-loader/url
(以 <link>
标签形式添加到 html 中)
sass-loader: 处理 sass/scss 文件,并且把它们编译成 css
css-loader: 处理 css,并把 css 代码转化为一个 js module
style-loader: 实现把加载的 css 代码以 style
标签的形式插入到 html 中
file-loader: 在这里实现把 css 提取为文件
2.安装相关依赖
注意:sass-loader 依赖于 node-sass
npm install -D sass-loader node-sass npm install -D css-loader style-loader file-loader 复制代码
3.目录结构
// `--` 代表目录, `-` 代表文件 --demo12 --src -app.js -style1.scss -style2.scss -index.html -webpack.config.js 复制代码
src/app.js
// 同步加载 // import "./style1.scss"; // import "./style2.scss"; window.addEventListener("click", function () { // 试试异步加载? 查看控制台试试 const style1 = import("./style1.scss"); const style2 = import("./style2.scss"); }); 复制代码
src/style1.scss
$bgColor: red; body { background-color: $bgColor; } 复制代码
src/style2.scss
$color: black; body { color: $color; } 复制代码
4.编写 webpack 配置文件
webpack.config.js
const path = require("path"); module.exports = { entry: { app: "./src/app.js" }, output: { publicPath: __dirname + "/dist/", // 打包后资源文件的引用会基于此路径 path: path.resolve(__dirname, "dist"), // 打包后的输出目录 filename: "[name].bundle.js" }, module: { rules: [ { test: /\.scss$/, // 以<style>标签形式引用css use: [ { loader: "style-loader", // 将 JS 字符串生成为 style 节点 options: { singleton: true // 处理为单个style标签,注释掉试试看? } }, "css-loader", // 将 CSS 转化成 CommonJS 模块 "sass-loader" // 将 Sass/Scss 编译成 CSS ] } ], // rules: [ // { // test: /\.scss$/, // // 以<link>标签形式引用css // use: [ // "style-loader/url", // { // loader: "file-loader", // options: { // name: '[name].[hash].css' // } // }, // "sass-loader" // ] // } // ] } }; 复制代码
以上所述就是小编给大家介绍的《demo12 webpack 处理 scss》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 自然语言处理之数据预处理
- Python数据处理(二):处理 Excel 数据
- 什么是自然语处理,自然语言处理主要有什么
- 集群故障处理之处理思路以及健康状态检查(三十二)
- Spark 持续流处理和微批处理的对比
- Android(Java)日期和时间处理完全解析——使用Gson和Joda-Time优雅地处理日常开发中关于时间处理的...
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。