Vue CLI + Webpack：我需要一个来自单个 scss 的单独 css 文件答案

【问题标题】：VueCLI + Webpack : I need a separate css file from a single scssVue CLI + Webpack：我需要一个来自单个 scss 的单独 css 文件
【发布时间】：2019-09-17 18:55:59
【问题描述】：

我正在使用 VueCLI 和 webpack 构建一个应用程序。我的应用程序具有通常的 main.js 与 vue 组件和 scss 资产按预期编译为全局 .js 和 .css 文件。

但我还需要在我的 /src 目录中有一个 example.scss 文件，该文件编译为特定目录中的单独 example.css 文件。

这是我的 /src 目录结构

/src
- /资产
-- /scss
--- 索引.scss
--- _import1.scss
--- _import2.scss
--- example.scss
- /组件
-- ... 我的 vue 组件坐在这里
- main.js
- 应用程序.vue

我想要的 /dist 目录：

/dist
- /css
-- index.hash.css
-- example.hash.css
- /js
-- index.hash.js
- index.html

如何使用自定义 webpack 配置 (https://cli.vuejs.org/guide/webpack.html#simple-configuration) 配置 vue.config.js 文件，以启用单独的 example.css 文件的导出？

谢谢。

【问题讨论】：

标签： vue.js webpack vue-cli vue-cli-3

【解决方案1】：

您可以添加另一个入口点，它将单独构建它\

vue.config.js

  chainWebpack: config => {
    config.entry('example')
      .add('./src/example.scss')
      .end()
  }

【讨论】：