已编译 CSS 未附加到 React 构建中的 JSX
Compiled CSS is not being attached to JSX in react build
我目前正在尝试测试我的 React 应用程序的第一个版本。我所有的 .scss 在开发中看起来都很棒，但是，当我为生产构建时 none 我的样式被添加到 jsx，除非我使用 :local(my-css)每一项。
对于应用程序的样板，我使用了 create-react-app。所有依赖项都列在下面的 package.json 中。到目前为止，我已经尝试弄乱我的 webpack.config.prod.js 来更改所有加载程序的各种选项。其中，我尝试在 css-loader 选项中将 sourceMap 设置为 true 和 false，并尝试将 scss 配置最小化为：
test: /\.scss/,
loader: 'style-loader!css-loader!sass-loader'
我也尝试删除 postcss-loader 但没有成功。我搜索了很多不同的站点试图找出解决方案，以至于我 运行 没有用英语写的文章，不得不 t运行 列出各种语言的页面。
另一件需要注意的相关事情是 scss 被编译成 css 并添加到 main.css 文件中。 main.map.css 还包含文件的正确映射。每个存在的组件也有 .css 文件，其中包含已编译 css 的非缩小版本。图片说明：
Prod Webpack 配置：
{
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() 中。这不是一个令人满意的选择，因为我想知道我的配置有什么问题，以便将来避免它。此外，我将不得不去手动更改数百个项目，这听起来不是一个好时机。任何有关如何解决此问题的见解都将不胜感激。
我解决了这个问题。结果你需要像这样在 'css-loader' 中启用模块：
{
loader: require.resolve('css-loader'),
options: {
modules: true //must add this
importLoaders: 1,
minimize: true,
sourceMap: shouldUseSourceMap,
},
},
我目前正在尝试测试我的 React 应用程序的第一个版本。我所有的 .scss 在开发中看起来都很棒，但是，当我为生产构建时 none 我的样式被添加到 jsx，除非我使用 :local(my-css)每一项。
对于应用程序的样板，我使用了 create-react-app。所有依赖项都列在下面的 package.json 中。到目前为止，我已经尝试弄乱我的 webpack.config.prod.js 来更改所有加载程序的各种选项。其中，我尝试在 css-loader 选项中将 sourceMap 设置为 true 和 false，并尝试将 scss 配置最小化为：
test: /\.scss/,
loader: 'style-loader!css-loader!sass-loader'
我也尝试删除 postcss-loader 但没有成功。我搜索了很多不同的站点试图找出解决方案，以至于我 运行 没有用英语写的文章，不得不 t运行 列出各种语言的页面。
另一件需要注意的相关事情是 scss 被编译成 css 并添加到 main.css 文件中。 main.map.css 还包含文件的正确映射。每个存在的组件也有 .css 文件，其中包含已编译 css 的非缩小版本。图片说明：
Prod Webpack 配置：
{
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() 中。这不是一个令人满意的选择，因为我想知道我的配置有什么问题，以便将来避免它。此外，我将不得不去手动更改数百个项目，这听起来不是一个好时机。任何有关如何解决此问题的见解都将不胜感激。
我解决了这个问题。结果你需要像这样在 'css-loader' 中启用模块：
{
loader: require.resolve('css-loader'),
options: {
modules: true //must add this
importLoaders: 1,
minimize: true,
sourceMap: shouldUseSourceMap,
},
},