Question

我目前正在尝试测试我的react应用程序的第一版。我所有的.scss在开发中看起来都很不错，但是，当我为生产而构建时，除非我在每个项目周围都使用：local（my-css），否则我的样式都不会添加到jsx中。

对于该应用程序的样板，我使用了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，但没有成功。我搜索了许多不同的站点，试图找出解决方案，以至于我用完了用英语写的文章，不得不翻译各种语言的页面。

要注意的另一相关内容是将scss编译为css并添加到main.css文件中。 main.map.css还包含正确的文件映射。对于每个存在的组件，都有.css文件，其中包含已编译的CSS的非最小版本。该图片说明了这一点：

Screenshots from Sources

产品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": "*"
  }

似乎唯一起作用的是，如果我将每个项目都包装在：local（）中的每个scss文件中。这不是一个令人满意的选择，因为我想知道我的配置出了什么问题，以便将来避免。而且，我将不得不去手动更改数百个听起来不太合适的项目。对于如何解决此问题的任何见解将不胜感激。

Answer 1

我解决了这个问题。事实证明，您需要像这样在“ css-loader”中启用模块：

{
    loader: require.resolve('css-loader'),
    options: {
        modules: true //must add this
        importLoaders: 1,
        minimize: true,
        sourceMap: shouldUseSourceMap,
    },
},

React build中未将编译的CSS附加到JSX

1 个答案: