Vue CLI

⚠️ Vue CLI 处于维护模式！

对于新项目，现在建议使用 create-vue 来搭建基于 Vite 的项目。还可以参考 Vue 3 工具指南 获取最新建议。

使用 CSS

Vue CLI 项目支持 PostCSS、CSS 模块 和预处理器，包括 Sass、Less 和 Stylus。

引用资源

所有编译后的 CSS 都由 css-loader 处理，它解析 url() 并将其解析为模块请求。这意味着您可以使用基于本地文件结构的相对路径引用资源。请注意，如果您想引用 npm 依赖项或通过 webpack 别名中的文件，路径必须以 ~ 为前缀，以避免歧义。有关更多详细信息，请参阅 静态资源处理。

预处理器

您可以在创建项目时选择预处理器（Sass/Less/Stylus）。如果您没有这样做，内部 webpack 配置仍然预先配置为处理所有这些。您只需要手动安装相应的 webpack 加载器

# Sass
npm install -D sass-loader sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus

关于 webpack 4 的说明

在使用 webpack 版本 4 时（Vue CLI 4 中的默认版本），您需要确保您的加载器与它兼容。否则，您将收到有关冲突的 peer 依赖项的错误。在这种情况下，您可以使用与 webpack 4 仍然兼容的旧版本加载器。

# Sass
npm install -D sass-loader@^10 sass

然后，您可以导入相应的文件类型，或者在 *.vue 文件中使用它们，方法是

<style lang="scss">
$color: red;
</style>

关于 Sass 性能的提示

请注意，在使用 Dart Sass 时，默认情况下，同步编译速度是异步编译速度的两倍，这是由于异步回调的开销。为了避免这种开销，您可以使用 fibers 包从同步代码路径调用异步导入器。要启用此功能，只需将 fibers 安装为项目依赖项

npm install -D fibers

请注意，由于它是一个原生模块，因此在操作系统和构建环境上可能存在兼容性问题。在这种情况下，请运行 npm uninstall -D fibers 来解决问题。

自动导入

如果您想自动导入文件（用于颜色、变量、mixin 等），可以使用 style-resources-loader。以下是一个用于 stylus 的示例，它在每个 SFC 和每个 stylus 文件中导入 ./src/styles/imports.styl

// vue.config.js
const path = require('path')

module.exports = {
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
  },
}

function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, './src/styles/imports.styl'),
      ],
    })
}

您也可以使用 vue-cli-plugin-style-resources-loader。

PostCSS

Vue CLI 在内部使用 PostCSS。

您可以通过 .postcssrc 或 postcss-load-config 支持的任何配置源配置 PostCSS，并通过 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。

autoprefixer 插件默认启用。要配置浏览器目标，请使用 package.json 中的 browserslist 字段。

关于供应商前缀 CSS 规则的说明

在生产构建中，Vue CLI 会优化您的 CSS，并根据您的浏览器目标删除不必要的供应商前缀 CSS 规则。由于默认情况下启用了 autoprefixer，因此您应该始终只使用无前缀的 CSS 规则。

CSS 模块

您可以 在 *.vue 文件中使用 CSS 模块，并使用 <style module>。

要将 CSS 或其他预处理器文件作为 CSS 模块导入 JavaScript，文件名应以 .module(s).(css|less|sass|scss|styl) 结尾

import styles from './foo.module.css'
// works for all supported pre-processors as well
import sassStyles from './foo.module.scss'

如果您想删除文件名中的 .module 并将所有样式文件视为 CSS 模块，则需要按如下方式配置 css-loader 选项

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      css: {
        modules: {
          auto: () => true
        }
      }
    }
  }
}

如果您想自定义生成的 CSS 模块类名，也可以通过 vue.config.js 中的 css.loaderOptions.css 来实现。这里支持所有 css-loader 选项

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      css: {
        // Note: the following config format is different between different Vue CLI versions
        // See the corresponding css-loader documentation for more details.
        // Vue CLI v3 uses css-loader v1: https://npmjs.net.cn/package/css-loader/v/1.0.1
        // Vue CLI v4 uses css-loader v3: https://npmjs.net.cn/package/css-loader/v/3.6.0
        // Vue CLI v5 uses css-loader v5: https://github.com/webpack-contrib/css-loader#readme
        modules: {
          localIdentName: '[name]-[hash]'
          exportLocalsConvention: 'camelCaseOnly'
        }
      }
    }
  }
}

向预处理器加载器传递选项

有时您可能希望向预处理器的 webpack 加载器传递选项。您可以使用 vue.config.js 中的 css.loaderOptions 选项来实现。例如，要向所有 Sass/Less 样式传递一些共享的全局变量

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      // @/ is an alias to src/
      // so this assumes you have a file named `src/variables.sass`
      // Note: this option is named as "prependData" in sass-loader v8
      sass: {
        additionalData: `@import "~@/variables.sass"`
      },
      // by default the `sass` option will apply to both syntaxes
      // because `scss` syntax is also processed by sass-loader underlyingly
      // but when configuring the `prependData` option
      // `scss` syntax requires an semicolon at the end of a statement, while `sass` syntax requires none
      // in that case, we can target the `scss` syntax separately using the `scss` option
      scss: {
        additionalData: `@import "~@/variables.scss";`
      },
      // pass Less.js Options to less-loader
      less:{
        // https://lesscss.org.cn/usage/#less-options-strict-units `Global Variables`
        // `primary` is global variables fields name
        globalVars: {
          primary: '#fff'
        }
      }
    }
  }
}

可以通过 loaderOptions 配置的加载器包括

提示

这比使用 chainWebpack 手动访问特定加载器更可取，因为这些选项需要在使用相应加载器的多个位置应用。