Конфигурация Webpack для SSR SCSS - PullRequest
Новая
       16

Конфигурация Webpack для SSR SCSS

0 голосов
/ 27 мая 2019

У меня есть приложение React-TypeScript SSR, где я использовал файлы SCSS для своего стиля.Мне нужно написать правило в Webpack для загрузки SCSS, и я не смог это сделать.

Я нашел в Интернете различные решения, которые очень сложны и используют такие вещи, как mini-css-extract-plugin.Я не смог заставить их работать.

В настоящее время у меня есть два файла конфигурации webpack, один для клиента (web) и один для сервера (node), оба из которых загружают SCSS как таковой:

{
    test: /\.scss$/,
    use: ["css-loader", "sass-loader"]
}

Я также столкнулся с другой проблемой, заключающейся в том, что я не могу использовать style-loader, поскольку он выдает ошибку об объекте окна.У кого-нибудь есть рабочий пример (просто желательно) загрузки SCSS в Webpack?

1 Ответ

1 голос
/ 27 мая 2019

Вы находитесь на правильном пути с двумя веб-файлами конфигурации, которые вы можете использовать

https://gist.github.com/mburakerman/629783c16acf5e5f03de60528d3139af

Но не устанавливайте другие файлы конфигурации, такие как babel.rc .yaml и т. Д. Или другое определениев project.json

попробуйте это 

        test: /\.scss$/,
        use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'postcss-loader',
            'sass-loader'
        ]

// .. 

plugins: [
    new MiniCssExtractPlugin({
        filename: 'assets/css/bundle-[contenthash].css',
        chunkFilename: 'assets/css/bundle-[contenthash].css'
    })
],

Смотрите полный пример https://github.com/dewelloper/pzone/blob/master/webpack.config.store.js

...