VueJS: Попытка скомпилировать два файла CSS в / dist

Question

Я только начал использовать Vue, и я ударился об стену, пытаясь скомпилировать SCSS в отдельные файлы.Я понимаю, что любой SCSS, который я пишу в компонентах, будет скомпилирован в один файл (/dist/css/app[hash].css), но я бы хотел, чтобы отдельные файлы не импортировались ни в один компонент для внешнего использования.

Iу меня есть несколько файлов 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 может быть хорошим примером.

Здесь есть похожий инструмент, который я использовал для webpack 3:
https://github.com/webpack-contrib/extract-text-webpack-plugin