Я сейчас пытаюсь протестировать первую сборку моего реактивного приложения. Все мои .scss отлично выглядят в dev, однако, когда я собираю для производства, ни один из моих стилей не добавляется в jsx, если я не использую: local (my-css) вокруг каждого элемента.
для примера приложения я использовал create-реагировать-приложение. Все зависимости перечислены в package.json ниже. до сих пор я пытался возиться с моим webpack.config.prod.js, чтобы изменить различные параметры для всех загрузчиков. Среди них я попытался установить для sourceMap значение true и false в параметрах css-loader и попытался свести к минимуму конфигурацию scss:
test: /\.scss/,
loader: 'style-loader!css-loader!sass-loader'
Я также безуспешно пытался удалить загрузчик postcss. Я искал так много разных сайтов, пытаясь найти решение, что у меня закончились статьи, написанные на английском, и мне пришлось переводить страницы с разных языков.
Еще одна важная вещь, которую стоит отметить, это то, что scss компилируется в css и добавляется в файл main.css. main.map.css также содержит правильные сопоставления для файлов. Также для каждого присутствующего компонента есть файлы .css, которые содержат не минимизированные версии скомпилированного css. Изображение для иллюстрации этого:
Prod Webpack Config:
{
test: /\.css$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
},
},
use: [
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
minimize: true,
sourceMap: shouldUseSourceMap,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
extractTextPluginOptions
)
),
},
{
test: /\.scss$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
},
},
use: [
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
minimize: true,
sourceMap: shouldUseSourceMap,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
{
loader: 'sass-loader',
},
],
},
extractTextPluginOptions
)
),
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
package.json:
"dependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"@babel/runtime": "^7.2.0",
"@kennethormandy/react-fittext": "^0.5.1",
"ajv": "^6.6.2",
"autoprefixer": "7.1.6",
"axiom": "^0.1.6",
"axios": "^0.18.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^9.0.0",
"babel-jest": "^23.4.2",
"babel-loader": "^8.0.5",
"babel-plugin-react-css-modules": "^5.0.0",
"babel-preset-react-app": "^6.1.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"css-loader": "0.28.7",
"dotenv": "4.0.0",
"dotenv-expand": "4.2.0",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.1.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",
"file-loader": "^1.1.11",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"imagemin": "^5.3.1",
"img-loader": "^3.0.1",
"jest": "20.0.4",
"lodash": "^4.17.11",
"moment": "^2.23.0",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
"postcss-scss": "^2.0.0",
"promise": "8.0.1",
"prop-types": "^15.6.2",
"proptypes": "^1.1.0",
"raf": "3.4.0",
"react": "^16.7.0",
"react-big-calendar": "^0.20.2",
"react-dev-utils": "^5.0.3",
"react-dom": "^16.7.0",
"react-google-login": "^4.0.1",
"react-icons": "^2.2.7",
"react-input-mask": "^2.0.4",
"react-linkify": "^0.2.2",
"react-redux": "^5.1.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-textarea-autosize": "^7.1.0",
"react-transition-group": "^2.5.2",
"redux": "^4.0.1",
"redux-axios-middleware": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.3.0",
"resolve": "1.6.0",
"style-loader": "0.19.0",
"sw-precache-webpack-plugin": "0.11.4",
"url-loader": "^0.6.2",
"webpack": "3.8.1",
"webpack-dev-server": "2.9.4",
"webpack-manifest-plugin": "1.3.2",
"whatwg-fetch": "2.0.3"
},
"devDependencies": {
"extract-text-webpack-plugin": "^3.0.2",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"sass": "*"
}
Единственное, что, похоже, работает, это если я обертываю каждый элемент в каждом файле scss в: local (). Это не является удовлетворительным вариантом, так как я хочу знать, что не так с моей конфигурацией, чтобы я мог избежать этого в будущем. Кроме того, я должен был бы пойти и вручную изменить сотни пунктов, что не походит на хорошее время. Любая идея о том, как решить эту проблему, будет принята с благодарностью.