VueCLI + Webpack：我需要一个单独的CSS来单独的CSS文件

Question

我正在使用VueCLI和Webpack构建应用程序。 我的应用程序具有通常的main.js主文件，其中包含vue组件和scss资产，可以按预期的方式编译为全局.js和.css文件。

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

这是我的/ src目录结构

/ src
-/资产
-/ scss
--- index.scss
--- _import1.scss
--- _import2.scss
--- example.scss
-/ components
-...我的Vue组件坐在这里
-main.js
-App.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文件的导出？

谢谢。

Answer 1

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

vue.config.js

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