Question

我刚开始使用Vue，并且在尝试将SCSS编译成单独的文件时碰壁。我了解我在组件中编写的任何SCSS都将被编译到一个文件（/dist/css/app[hash].css）中，但是我想要单独的文件，这些文件不会导入任何组件以供外部使用。

我有几个SCSS文件（frames.scss，lists.scss和tables.scss），我希望将它们编译，缩小并在前面提到的CSS文件旁边添加到自己的CSS文件中

我希望构建结构看起来像这样（外部CSS文件与应用CSS文件一起存在）：

dist/
  css/
    app[hash].css
    frames.css
    lists.css
    tables.css

我对Webpack的使用经验很少，因此我的vue.config.js文件目前为空，而我的postcss.config.js文件如下：

module.exports = {
  plugins: {
    autoprefixer: {}
  }
}

我在整个StackOverflow上搜索了无济于事的解决方案，因此将不胜感激！

Answer 1

对于webpack 4，我认为您想看看mini-css-extract-plugin。

有一个webpack插件，默认情况下，每个输入都会创建不同的文件。您可以按预期将其与scss一起使用。 https://stackoverflow.com/a/53180597/6646536可能是一个很好的例子。