Всем привет! Есть такая проблема. Проект написан на next.js. Все зависимости идентичны. Конфиги одинаковы. Версии ноды совпадают. Но при этом некоторые элементы рендерятся по-разному. В общем разобралась откуда взялась проблема, но не понимаю, в чем причина ее. В общем на проде и на тестовом разные каскады свойств. Например, есть кнопка на главной странице, main__button. Она наследуется от общего класса button и немного переопределяет его стили. Так вот, на тестовом, на самом верху стили main__button, а потом стили просто button. На проде же по непонятным причинам свойства button переопределяют свойства main__button.
почему так может быть? вот мои зависимость
"dependencies": {
"@babel/polyfill": "^7.7.0",
"animated-scroll-to": "^1.2.2",
"axios": "^0.18.0",
"classnames": "^2.2.6",
"cookie": "^0.3.1",
"express": "^4.16.4",
"express-useragent": "^1.0.13",
"http-proxy-middleware": "^0.19.0",
"intersection-observer": "^0.7.0",
"js-cookie": "^2.2.1",
"lodash": "^4.17.11",
"moment": "^2.23.0",
"next-redux-wrapper": "^2.0.0",
"next-routes": "^1.4.2",
"normalize.css": "^8.0.0",
"qs": "^6.7.0",
"react": "^16.8.6",
"react-accessible-accordion": "^3.0.0",
"react-addons-css-transition-group": "^15.6.2",
"react-collapse": "^4.0.3",
"react-custom-scrollbars": "^4.2.1",
"react-dom": "^16.8.6",
"react-dotdotdot": "^1.2.3",
"react-google-recaptcha": "^2.0.1",
"react-helmet": "^5.2.0",
"react-id-swiper": "^1.6.8",
"react-infinite-scroller": "^1.2.4",
"react-input-mask": "^2.0.4",
"react-input-range": "^1.3.0",
"react-intersection-observer": "^8.22.6",
"react-modal": "^3.6.1",
"react-motion": "^0.5.2",
"react-redux": "^5.0.7",
"react-select": "^2.3.0",
"react-sizes": "^2.0.0",
"react-spring": "^6.1.4",
"react-sticky-state": "^2.1.9",
"react-textarea-autosize": "^7.1.0",
"react-tippy": "^1.2.3",
"react-yandex-maps": "^3.0.2",
"react-youtube": "^7.9.0",
"recompose": "^0.30.0",
"redux": "^4.0.0",
"redux-form": "^7.4.2",
"redux-persist": "^5.10.0",
"redux-promise-middleware": "^5.1.1",
"redux-thunk": "^2.3.0",
"reselect": "^3.0.1",
"sanitize-html": "^1.19.1",
"sass-mq": "^5.0.0"
},
"devDependencies": {
"@sentry/browser": "^5.11.1",
"@sentry/integrations": "^5.11.1",
"@sentry/node": "^5.11.1",
"@zeit/next-css": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
"babel-eslint": "^9.0.0",
"babel-plugin-module-resolver": "^3.1.1",
"dotenv": "^6.0.0",
"dotenv-webpack": "^1.5.7",
"emit-file-loader": "0.0.2",
"eslint": "^5.14.1",
"eslint-config-react-app": "^2.1.0",
"eslint-loader": "^2.1.1",
"eslint-plugin-flowtype": "^2.50.3",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"file-loader": "^2.0.0",
"husky": "^1.3.1",
"lint-staged": "^8.1.4",
"next": "^9.1.7",
"next-images": "^1.1.2",
"node-sass": "^4.9.3",
"nodemon": "^2.0.2",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"redux-sentry-middleware": "^0.1.3",
"sass-resources-loader": "^1.3.3",
"stylelint": "^9.5.0",
"stylelint-webpack-plugin": "^0.10.5",
"svg-sprite-loader": "^4.1.2",
"svgo-loader": "^2.2.0",
"url-loader": "^1.1.1"
}
а вот конфиг next
const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');
const withImages = require('next-images');
require('dotenv').config();
const path = require('path');
const Dotenv = require('dotenv-webpack');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = withImages(withCSS(withSass({
useFileSystemPublicRoutes: false,
exclude: /\.svg$/,
inlineImageLimit: 0,
webpack: (config, { dev }) => {
const entryFactory = config.entry;
config.entry = async () => {
const entries = await entryFactory();
if (entries['main.js']) {
entries['main.js'] = [
'./src/polyfills.js',
...entries['main.js'],
];
}
return entries;
};
config.module.rules.push({
test: /\.(sass|scss$)/,
use: [
{
loader: 'sass-resources-loader',
options: {
resources: ['./src/static/styles/base/mixins.scss', './src/static/styles/base/vars.scss']
},
}
]
});
config.module.rules.push({
test: /\.svg$/,
loader: 'svg-sprite-loader'
});
config.module.rules.push({
test: /\.(woff|woff2|eot|ttf)$/,
loader: 'file-loader',
options: {
outputPath: 'static/',
publicPath: '/_next/static/'
}
});
config.plugins = config.plugins || [];
if (dev) {
// Use eslint
config.module.rules.push({
test: /\.js$/,
enforce: 'pre',
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
emitWarning: true
}
});
// Use stylelint
config.plugins.push(new StyleLintPlugin({
emitErrors: false,
syntax: 'scss'
}));
}
// Read the .env file
config.plugins.push(
new Dotenv({
path: path.join(__dirname, '.env'),
systemvars: true
})
);
if (!dev) {
config.plugins.push(
new OptimizeCSSAssetsPlugin({})
);
}
return config
}
})));
