Vue.js CLI 3 - как я могу создать вендор для CSS / Sass?

Question

Используя @vue/cli 3.x, я немного изменил свой vue.config.js.Я хочу иметь отдельные CSS-файлы, такие как app.css и vendor.css (переносимые из Sass) - аналогично тому, как он настроен для обработки JavaScript.Я не уверен, как установить правильный конфиг для достижения этой цели.Я загружаю свои файлы неправильно?Полностью отсутствует отметка?

// vue.config.js
module.exports = {
  // [...]
  configureWebpack: {
    optimization: {
      splitChunks: {
        cacheGroups: {
          shared: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendor',
            enforce: true,
            chunks: 'all',
          }
        }
      }
    }
  }
};

Моя сборка где приводит к ...

dist
├── css
|   └── app.css
├── js
|   ├── app.js
|   └── vendor.js

app.css включает все Я импортировал через мой node_modules.Мой стиль импорта выглядит следующим образом в моем главном App.vue компоненте ...

<style lang="scss">
  @import '../node_modules/minireset.css/minireset.sass';
</style>

// [...]

Мой желаемый результат - следующая структура, в которой извлекается CSS / Sass "vendor" ...

dist
├── css
|   ├── app.css
|   └── vendor.css
├── js
|   ├── app.js
|   └── vendor.js

---

Я изучил MiniCssExtractPlugin , где в первых предложениях говорится следующее ...

Этот плагин извлекает CSS в отдельные файлы

Но я не нашел примеров того, как сделать это идиоматически в экосистеме Vue.js.Я также попытался добавить следующее к своему vue.config.js, но, похоже, ничего не вступило в силу ...

module.exports = {
  // [...]
  css: {
    extract: {
      filename: 'css/[name].css',
      chunkFilename: 'css/[name].css',
    },
  },
};

---

Я также нашел то, что должно было быть объяснением в домашних условиях Vue SSR Guide |Управление CSS , но оно использует webpack.optimize.CommonsChunkPlugin, которое устарело в пользу webpack.optimize.SplitChunksPlugin , выдавая ошибку сборки ...

Ошибка: webpack.optimize.CommonsChunkPlugin был удален, вместо этого используйте config.optimization.splitChunks.

Answer 1

Вы можете добавить MiniCssExtractPlugin в конфигурацию вашего веб-пакета (для документов ):

// vue.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // [...]
  configureWebpack: {
    plugins: [
      new MiniCssExtractPlugin({
        filename: '[name].css'
      })
    ],
    optimization: {
      splitChunks: {
        cacheGroups: {
          shared: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendor',
            enforce: true,
            chunks: 'all',
          }
        }
      }
    }
  }
};

Однако, это может не работать с отдельными компонентами файла .Чтобы получить эту работу, вам, возможно, придется использовать vue-loader@next

Answer 2

Я однажды использовал этот плагин и считаю, что он делает то, что вы хотите достичь: https://github.com/teamable-software/css-chunks-html-webpack-plugin

Answer 3

vue.config.js также позволяет использовать метод chainWebpack.Это может быть предпочтительнее, поскольку позволяет изменять конфигурацию vue-cli.Использование configureWebpack полностью перезаписывает конфигурацию по умолчанию, что может быть частью проблемы с настройкой вашей работы с Sass.

Эта конфигурация предназначена только для чистого CSS, но довольно похожа нау вас есть.

Только что попробовал это с некоторым Sass, встроенным в некоторые блоки стилей, и он разбивает css вендора из приложения css.

module.exports = {
    chainWebpack(config) {
        config
            .output.chunkFilename('[name].bundle.js').end()
            .optimization.splitChunks({
                cacheGroups: {
                    vendorStyles: {
                        name: 'vendor',
                        test(module) {
                            return (
                                /node_modules/.test(module.context) &&
                                // do not externalize if the request is a CSS file
                                !/\.css$/.test(module.request)
                            );
                        },
                        chunks: 'all',
                        enforce: true
                    }
                }
            });
    }
};

Обновление

Также необходимо извлечь ваши @import '../node_modules/minireset.css/minireset.sass'; и другие операторы импорта из блока style и поместить его в блок script вашего компонента vue:

// your component file
<script>
    import "minireset.css/minireset.sass";
    // rest of script
</script>

Файл все еще будет импортирован и использован в вашем блоке стилей ниже.

Мой экспорт включает поставщика. [Hash] .css и файл app. [Hash] .css.Файл приложения содержит содержимое блоков стиля.Поскольку мое тестовое приложение было простым и в вашем случае использования, файл поставщика содержит только информацию о стиле из мини-набора:

// vendor.[hash].css
/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}audio,embed,iframe,img,object,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}

Git-репо vue app здесь .Импорт файла sass находится в HelloWorld.vue.