Reactjs CSS模块将CSSE导出为<；风格>；头标记中的标记已禁用sourceMap

我正在写一个

React

，

服务器端渲染

，

Router4

，

头盔

，

CSS模块

样板，一切都很棒，但有一件事伤害了我的灵魂：

首先看到我的

webpack.production.config.js

：

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StatsPlugin = require('stats-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const distDir = path.join(__dirname, 'dist');
const srcDir = path.join(__dirname);

module.exports = [
    {
        name: 'client',
        target: 'web',
        entry: `${srcDir}/client.jsx`,
        output: {
            path: distDir,
            filename: 'client.js',
            publicPath: distDir,
        },
        resolve: {
            extensions: ['.js', '.jsx']
        },
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /(node_modules\/)/,
                    use: [
                        {
                            loader: 'babel-loader',
                        }
                    ]
                },
                {
                    test: /\.scss$/,
                    use: [
                        {
                            loader: 'style-loader',
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                modules: true,
                                importLoaders: 1,
                                localIdentName: '[hash:base64:10]',
                                sourceMap: false,
                            }
                        },
                        {
                            loader: 'sass-loader'
                        }
                    ]
                }
            ],
        },
        plugins: [
            new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV: '"production"'
                }
            }),
            new CleanWebpackPlugin(distDir),
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false,
                    screw_ie8: true,
                    drop_console: true,
                    drop_debugger: true
                }
            }),
            new webpack.optimize.OccurrenceOrderPlugin(),
        ]
    },
    {
        name: 'server',
        target: 'node',
        entry: `${srcDir}/server.jsx`,
        output: {
            path: distDir,
            filename: 'server.js',
            libraryTarget: 'commonjs2',
            publicPath: distDir,
        },
        resolve: {
            extensions: ['.js', '.jsx']
        },
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /(node_modules\/)/,
                    use: [
                        {
                            loader: 'babel-loader',
                        }
                    ]
                },
                {
                    test: /\.scss$/,
                    use: ExtractTextPlugin.extract({
                        fallback: "isomorphic-style-loader",
                        use: [
                            {
                                loader: 'css-loader',
                                options: {
                                    modules: true,
                                    importLoaders: 1,
                                    localIdentName: '[hash:base64:10]',
                                    sourceMap: false
                                }
                            },
                            {
                                loader: 'sass-loader'
                            }
                        ]
                    })
                }
            ],
        },
        plugins: [
            new ExtractTextPlugin({
                filename: 'styles.css',
                allChunks: true
            }),
            new OptimizeCssAssetsPlugin({
                cssProcessorOptions: { discardComments: { removeAll: true } }
            }),
            new StatsPlugin('stats.json', {
                chunkModules: true,
                modules: true,
                chunks: true,
                exclude: [/node_modules[\\\/]react/],
            }),
        ]
    }
];

这是我的

template.js

文件，服务器使用它来构建基本

HTML

：

export default ({ markup, helmet }) => {
    return `<!DOCTYPE html>
            <html ${helmet.htmlAttributes.toString()}>
                <head>
                    ${helmet.title.toString()}
                    ${helmet.meta.toString()}
                    ${helmet.link.toString()}
                </head>
                <body ${helmet.bodyAttributes.toString()}>
                    <div id="root">${markup}</div>
                    <script src="/dist/client.js" async></script>
                </body>
            </html>`;
};

导出默认值（{markup，helmet}）=>{
返回`
${helmet.title.toString（）}
${helmet.meta.toString（）}
${helmet.link.toString（）}
${markup}
`;
};

就像我写的一样，我将

sourceMap

设置为

false

，因此所有样式都作为

标记加载到

标记中

如果我将

soureMap

设置为

true

，则

标记会出现在

标记内，即使它不是服务器端，并且有一个奇怪的blob url用于加载

CSS

：

事实上，我想在head标签中添加服务器端链接标签，直接指向

styles.css

，我该怎么做

我的整个项目都在进行中

---

它没有太多的代码，很少且简单，它只是一个简单的样板文件。查看生产版本，在

客户端

配置中，您不使用样式加载器。您需要使用

提取文本网页包插件

。您在

服务器

构建配置中正确地执行了此操作。但是这个配置不应该出现在您的服务器构建中，因为在服务器的源代码中，您从不使用css文件

{
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
     fallback: 'style-loader',
     use: [
        {
           loader: 'css-loader',
           options: {
              modules: true,
              localIdentName: '[hash:base64:10]',
           }
        },
        {
           loader: 'sass-loader'
        }
     ]
  })
}
...
plugins: [
   new ExtractTextPlugin({
      filename: 'styles.css'
   }),
]

将其添加到

客户端

构建配置中

link={[{rel: "stylesheet", href: "/dist/styles.css"}]}

并将

链接

道具添加到

App.jsx

中，以在

标记中加载

标记

所以你的

App.jsx

render方法变成了：

render() {
        return (
            <div>
                <Helmet
                    htmlAttributes={{lang: "en", amp: undefined}} // amp takes no value
                    titleTemplate="%s | React App"
                    titleAttributes={{itemprop: "name", lang: "en"}}
                    meta={[
                        {name: "description", content: "Server side rendering example"},
                        {name: "viewport", content: "width=device-width, initial-scale=1"},
                    ]}
                    link={[{rel: "stylesheet", href: "/dist/styles.css"}]}/*ADD THIS*/
                />
                <Switch>
                    <Route exact path='/' component={Homepage}/>
                    <Route path="/about" component={About}/>
                    <Route path="/contact" component={Contact}/>
                </Switch>
            </div>
        );
    }

render（）{
返回(
);
}

您的客户端构建配置构建/捆绑前端所需的一切。JS、CSS、图像。。。并将其放入dist文件夹

---

您的服务器仅从root/为该dist文件夹提供服务。这是你的服务器所做的唯一一件事（除了提供一个api之外）

好的，我明白了，你的意思是我必须在

客户端中使用
ExtractTextPlugin
来省略
标记，我在
App.jsx
中添加
头盔
的
链接
道具
，在
标记中添加
标记。正是我的欲望激发了。谢谢，是的。您还可以另外使用html网页包插件。然后，将自动创建一个html文件，其中包含指向styles.css和javascript文件的正确链接！谢谢，在这种情况下，我想它不需要使用
html网页插件
，但它对其他项目是一个很好的指导，非常感谢。