vue.config.js

关于 css 的配置

  1. module.exports = {
  2.   css: {
  3.     // 将组件内的 css 提取到一个单独的 css 文件（只用于生产环境中）
  4.     // 也可以是一个传递给 extract-text-webpack-plugin 的选项对象
  5.     // 默认生产环境是 true，开发环境是 false
  6.     extract: true,
  8.     // 是否开启 css source map?默认为false
  9.     sourceMap: false,
  11.     // 为预处理器的 loader 传递自定义选项
  12.     // 支持的loader有css-loader、postcss-loader、sass-loader、less-loader、stylus-loader
  13.     loaderOptions: {
  14.       css: {
  15.         // 这里的选项会传递给 css-loader
  16.       },
  17.       postcss: {
  18.         // 这里的选项会传递给 postcss-loader
  19.       }
  20.     },
  22.     // 为所有的 css 及其预处理文件开启 CSS Modules
  23.     // 这个选项不会影响 *.vue 文件
  24.     modules: false
  25.   }

在 loaderOptions 那里，如果要使用 sass-loader 配置全局变量的话，通常是以下配置：

  1. module.exports = {
  2.   css: {
  3.     loaderOptions: {
  4.       sass: {
  5.         prependData: `@import "@/styles/index.scss";` // 入口文件
  6.       }
  7.     }
  8.   }

这个时候要注意，不同版本的 sass-loader 使用的键名不同，我这里使用的是 prependData ，我的 sass-loader 版本是 ^8.0.2 。

  1. sass-loader v8- , 这个选项名是 "data"
  2. sass-loader v8中, 这个选项名是 "prependData"
  3. sass-loader v10+中, 这个选项名是 "additionalData"