Как настроить так что бы css подключался вперед js?

Чтобы настроить Webpack таким образом, чтобы CSS файлы подключались перед JS файлами, вам потребуется выполнить несколько шагов.

1. Установите необходимые пакеты:

   npm install --save-dev style-loader css-loader

2. В файле конфигурации Webpack (например, webpack.config.js) добавьте правила для обработки CSS файлов:

   module.exports = {
     // ...
     module: {
       rules: [
         {
           test: /.css$/,
           use: [
             'style-loader',
             'css-loader'
           ]
         },
         // другие правила для обработки других типов файлов
       ]
     },
     // ...
   }

В данном примере мы используем style-loader для внедрения CSS стилей непосредственно в код JavaScript, а css-loader для загрузки и обработки CSS файлов.

3. В вашем коде JavaScript используйте импорт CSS файлов таким образом, чтобы они были подключены на верхнем уровне:

   import './styles.css';

Если вы используете несколько CSS файлов, то импортируйте их в нужной последовательности, чтобы они появились в загрузке перед JS файлами.

Если вы используете CommonJS стиль импорта, вы можете использовать следующий синтаксис:

   require('./styles.css');

Теперь, при сборке вашего проекта с использованием Webpack, CSS файлы будут подключаться перед JS файлами, что должно решить вашу проблему.