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

时间:2019-04-29 07:04:38

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

我正在使用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文件的导出?

谢谢。

1 个答案:

答案 0 :(得分:2)

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

vue.config.js

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