Webpack4 配置 scss Loader

最新推荐文章于 2024-04-10 05:44:49 发布

LiuJun2Son

最新推荐文章于 2024-04-10 05:44:49 发布

阅读量4.7k

点赞数 1

分类专栏：构建工具文章标签：构建工具 webpack

本文链接：https://blog.csdn.net/u012987546/article/details/96285865

版权

构建工具专栏收录该内容

24 篇文章 2 订阅

订阅专栏

1.配置 scss Loader

SCSS 可以让你用更灵活的方式写 CSS。它是一种 CSS 预处理器，语法和 CSS 相似，但加入了变量、逻辑、等编程元素。SCSS 又叫 SASS，区别在于 SASS 语法类似 Ruby，而 SCSS 语法类似 CSS，对于熟悉 CSS 的前端工程师来说会更喜欢 SCSS。

使用 SCSS 可以提升编码效率，但是必须把 SCSS 源代码编译成可以直接在浏览器环境下运行的 CSS 代码。 SCSS 官方提供了多种语言实现的编译器，由于本书更倾向于前端工程师使用的技术栈，所以主要来介绍下 node-sass。

node-sass 编译器核心模块是由 C++ 编写，再用 Node.js 封装了一层，以供给其它 Node.js 调用。

新建一个项目

|-- package.json
|-- src
|   |       `-- common.js
|   |       `-- index.html
|   |       `-- main.scss
|           `-- main.js
`-- webpack.config.js

package.json

{
  "name": "testcssloader",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "liujun",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.35.3",
    "webpack-cli": "^3.3.6"
  }
}

1.scripts 属性里编写了3个脚本：其中 dev 对应的脚本是构建测试版；其中 build对应的脚本是构建发布版

2.开发依赖了style-loader css-loader node-sass sass-loader webpack webpack-cli

webpack.config.js

const path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
  },
  module: {
    rules: [
      {
        test: /\.scss$/, 
        // 注意:use 的别名 是 loaders。下面3个加载的执行顺序是 3 2 1
        use: [
          // 1.不用传递参数可以简写
          'style-loader',
          {
            loader: 'css-loader',
            // 2.给css-loader传递参数
            options: {
              url: true,
              import: true
            }
          },
          // 3.使用sass加载器
          'sass-loader'
        ], 
      }
    ]
  }
};

use接收一个数组，数组中可以存放字符串和对象，并且use的别名是 loaders。上面的use接收了3个加载器，加载器执行的顺序是：sass-loader -> css-loader -> style-loader

main.scss

// 这里使用 scss 的语法，定义了一个变量
$color: pink;
body {
  background-color: $color;
}

main.js

// 1.通过 CommonJS 规范导入 showHelloWorld 函数
const showHelloWorld = require('./common.js');
// 2.执行 showHelloWorld 函数
showHelloWorld('Webpack的安装和使用');
// 3.通过 CommonJS 规范导入 SCSS 模块
require('./main.scss');

index.html

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--导入 Webpack 输出的 JavaScript 文件-->
<script src="../dist/bundle.js"></script>
</body>
</html>

本地安装 webpack 和用到的loader

npm install webpack@4.35.3  --save-dev
npm install webpack-cli@3.3.6  --save-dev
npm install style-loader@0.23.1  --save-dev
npm install css-loader@3.0.0  --save-dev

npm install node-sass@4.12.0  --save-dev   // 把 scss 编译成 css
npm install sass-loader@7.1.0  --save-dev  // 加载 scss 文件，把scss文件转成commonjs模块

在项目的根目录，执行脚本构建项目

npm run dev

打包后输出的结果

|-- dist
|   |-- bundle.js
|-- node_modules
|-- package-lock.json
|-- package.json
|-- src
|   |-- common.js
|   |-- index.html
|   |-- main.scss
|   `-- main.js
`-- webpack.config.js

打包之后的 index.html 文件的部分内容：

<html><head>
  <meta charset="UTF-8">
<style type="text/css">body {
  background-color: pink; }
</style></head>
<body>
<div id="app"></div>
<!--导入 Webpack 输出的 JavaScript 文件-->
<script src="../dist/bundle.js"></script>

</body></html>

总结：

上面webpack.config.js配置中的use通过正则 /\.scss$/ 匹配所有以 .scss 为后缀的 SCSS 文件，再分别使用3个 Loader 去处理。具体处理流程如下：

通过 sass-loader 把 SCSS 源码转换为 CSS 代码，再把 CSS 代码交给 css-loader 去处理。
css-loader 会找出 CSS 代码中的 @import 和 url() 这样的导入语句，告诉 Webpack 依赖这些资源。同时还支持 CSS Modules、压缩 CSS 等功能。处理完后再把结果交给 style-loader 去处理。
style-loader 会把 CSS 代码转换成字符串后，注入到 JavaScript 代码中去，通过 JavaScript 去给 DOM 增加样式。如果你想把 CSS 代码提取到一个单独的文件而不是和 JavaScript 混在一起，可以使 ExtractTextPlugin 插件。

LiuJun2Son

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Webpack4 配置 scss Loader

1.配置 scss LoaderSCSS 可以让你用更灵活的方式写 CSS。它是一种 CSS 预处理器，语法和 CSS 相似，但加入了变量、逻辑、等编程元素。SCSS 又叫 SASS，区别在于 SASS 语法类似 Ruby，而 SCSS 语法类似 CSS，对于熟悉 CSS 的前端工程师来说会更喜欢 SCSS。使用 SCSS 可以提升编码效率，但是必须把 SCSS 源代码编译成可以直接在浏览器...
复制链接

扫一扫