webpack-sass-loader

Scss-Loader

自动将 scss 转换为 CSS。

使用 Scss-Loader

安装 Scss

npm install --save-dev node-sass

安装 Sess-loader

npm install --save-dev sass-loader

配置 Sess-Loader

修改 webpack 核心配置文件不在一一介绍了前面介绍过了，添加规则内容如下。

module.exports = {
    module: {
        rules: [
            // 打包SCSS规则
            {
                test: /\.scss$/,
                use: [{
                    // 将 JS 字符串生成为 style 节点
                    loader: "style-loader"
                }, {
                    // 将 CSS 转化成 CommonJS 模块
                    loader: "css-loader"
                }, {
                    // 将 Sass 编译成 CSS
                    loader: "sass-loader"
                }]
            }
        ]
    }
};

注意点

因为 Loader 是从右至左从下至上，所以必须先由 Sass-Loader 处理完后才能交给其他 Loader 进行处理。

新建一个 scss 文件 index.scss 内容如下所示：

body {
  width: 100%;
  height: 100%;
  background: skyblue;

  img {
    height: 400px;
    border: 1px solid #00f;
  }
}

修改 index.js，如下所示：

import icon from "./index.jpg";
import "./index.scss"

let oImg = document.createElement("img");
oImg.src = icon;
oImg.setAttribute("class", "size");
document.body.appendChild(oImg);

使用 webpack 进行打包，然后再 HTML 中引入打包之后的文件，浏览器中查看效果如下所示：