How to bundle first css styles and then scss?

Question

webpack

At the very beginning of the project, I imported the styles of a third-party library in css format:

// не знаю, в чем была проблема сделать стили изолированно, но не об этом сейчас
import '@vkontakte/vkui/dist/vkui.css';

Next, each component has modular scss styles .
Now webpack inserts the styles of the vkui library and normalize.css into the final css bundle at the very end.
You need to swap them, i.e. first scss , then css , and not vice versa.
I don't understand why or what it depends on.
webpack:

{
        test: /\.(css|scss|sass)$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: {
                exportGlobals: true,
                localIdentName: '[local]--[hash:base64:5]',
                auto: /\.module\.\w+$/i,
              },
            },
          },
          {
            loader: 'sass-loader',
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    autoprefixer({
                      browsers: ['> 0%'],
                    }),
                  ],
                ],
              },
              sourceMap: true,
            },
          },
        ],
      },

index.js

import 'normalize.css';
import '@vkontakte/vkui/dist/vkui.css';

export const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)));

console.log('store', store.getState());

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Answer 1

.scss_styles_here {

}

import '@vkontakte/vkui/dist/vkui.css';