Недавно мы узнали, что мы должны использовать SSR для нашего проекта React.Я проверил каждый известный мне метод и почти проверил все методы, которые я нашел на средних и других сайтах.И после большой работы я решил, что нам нужно перейти на Next JS.
Пока процесс переноса все хорошо, но для таблиц стилей.
В старой версиинаше приложение, мы использовали webpack для связывания наших стилей с проектом, и все было хорошо.
Это webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const port = process.env.PORT || 3000;
const extractSCSS = new ExtractTextPlugin('./[name].css');
// const UglifyJS = require('uglifyjs-webpack-plugin');
module.exports = {
mode: 'development',
output: {
filename: 'bundle.[hash].js',
publicPath: '/'
},
devtool: 'source-map',
module: {
rules: [
// First Rule
{
test: /\.(js)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
// Second Rule
{
test: /\.scss$/,
use: ['css-hot-loader'].concat(extractSCSS.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader?sourceMap',
options: { alias: { '../img': '../public/img' }, sourceMap: true }
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
}))
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'public/index.html',
favicon: 'public/favicon.ico'
}),
extractSCSS,
],
devServer: {
host: 'localhost',
port: port,
historyApiFallback: true,
open: true
}
};
и после того, как я перенес приложение, мой next.config.js выглядит так:
// next.config.js
const withSass = require('@zeit/next-sass')
const withCSS = require('@zeit/next-css')
module.exports = withCSS( withSass(
{
webpack(config, options) {
config.module.rules.push({
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000
}
}
},
)
return config
},
}
))
Проблема в том, что все отображается правильно, но в нем нет таблиц стилей, и он не содержит никакого стиля.Есть ли кто-нибудь, кто мог бы помочь мне решить эту проблему?