Vue 教程(二十八)webpack 使用 css 文件

Posted 2021-09-04 _否极泰来_

Vue 教程(二十八)webpack 使用 css 文件

• webpack 用来做什么？

  • 主要是用 webpack 来处理我们写的 js 代码,并且 webpack 会自动处理 js 之间相关的依赖。
  • 在开发中我们不仅仅有基本的 js 代码处理,我们也需要加载 cs、图片,也包括一些高级的将 ES6 转成 ES5 代码,将 TypeScript 转成 ES5 代码,将 sscs、less 转成 css,将 Jsx、.vue 文件转成 js 文件等等。
  • 对于 webpack 本身的能力来说,对于这些转化是不支持的。
  • 那怎么办呢?给 webpack 扩展对应的 loader 就可以啦

• loader 使用过程：

  • 步骤一:通过 npm 安装需要使用的 loader
    • 安装 style-loader：npm install style-loader@0.23.1 --save-dev
    • 安装 css-loader：npm install css-loader@2.0.2 --save-dev
    • 注意：一定要安装合适的版本
  • 步骤二:在 webpack.config js 中的 modules 关键字下进行配置
    • 配置 webpack.config.js

• loader 都有哪些

  • loader 官网：https://www.webpackjs.com/concepts/
  • 样式 loader：
    1. [style-loader](https://www.webpackjs.com/loaders/style-loader) 将模块的导出作为样式添加到 DOM 中
    2. [css-loader](https://www.webpackjs.com/loaders/css-loader) 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码
    3. [less-loader](https://www.webpackjs.com/loaders/less-loader) 加载和转译 LESS 文件
    4. [sass-loader](https://www.webpackjs.com/loaders/sass-loader) 加载和转译 SASS/SCSS 文件
    5. [postcss-loader](https://www.webpackjs.com/loaders/postcss-loader) 使用 PostCSS 加载和转译 CSS/SSS 文件
    6. stylus-loader 加载和转译 Stylus 文件

• 项目配置

总结: 注意 css-loader 和 style-loader 顺序。同时也需要注意安装的版本，如果 npm 的版本和 css-loader、style-loader 版本不一致会报错

    – 以上为《Vue 教程(二十八)webpack 使用 css 文件》，如有不当之处请指出，我后续逐步完善更正，大家共同提高。谢谢大家对我的关注。

——厚积薄发(yuanxw)