账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    create-react-app 配置css-modules 打包scss 无效?
    30
    0
    {
                test: /\.(css|scss)$/,
                include: [
                  /scoped/,
                ],
                loader: ExtractTextPlugin.extract(
                  Object.assign(
                    {
                      fallback: {
                        loader: require.resolve('style-loader'),
                        options: {
                          hmr: false,
                        },
                      },
                      use: [
                        {
                          loader: require.resolve('css-loader'),
                          options: {
                            importLoaders: 2,
                            modules:true,
                            localIdentName:'[local]-[hash:base64:5]',
                            // localIdentName:'[name]__[local]___[hash:base64:5]',
                            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: require.resolve('sass-loader') // compiles Less to CSS
                        }
                      ],
                    },
                    extractTextPluginOptions
                  )
                ),
                // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
              },
              {
                test: /\.(css|scss)$/,
                exclude: [
                  /scoped/,
                ],
                loader: ExtractTextPlugin.extract(
                  Object.assign(
                    {
                      fallback: {
                        loader: require.resolve('style-loader'),
                        options: {
                          hmr: false,
                        },
                      },
                      use: [
                        {
                          loader: require.resolve('css-loader'),
                          options: {
                            importLoaders: 2,
                            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: require.resolve('sass-loader'),
                        }
                      ],
                    },
                    extractTextPluginOptions
                  )
                ),
                // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
              },

    webpack.config.prod.js 中配置无效 打包出来的 标签页没有加上样式 postcss-loader 也失效
    打包后:

    .App {
      text-align: center;
      transform: translateX(5px); }
    <div>标题<p>45132</p></div>

    开发模式:

    .App-2R2Ee {
      text-align: center;
      -webkit-transform: translateX(5px);
      -ms-transform: translateX(5px);
      transform: translateX(5px); }
    <div class="header-V9F5Y">标题<p class="sss-2Irfm">45132</p></div>

    配置中是只有scoped.scss 开启css modules
    请问怎么配置

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部