使用 webpack 和 React 在开发/生产中配置 CSS 模块

法比奥

如何在生产中使用 CSS 模块并在生产中加载标准 css 文件?

我正在使用 webpack 配置一个带有 React 的新应用程序

开发中,我使用 webpack loader 使用 CSS 模块:

到我的 .jsx 文件中,我导入样式文件:

import style from './stile.scss';
export class App extends React.Component {
 render() {
    return (
        <div>
            <div>
                <span className={style.title}>Ciao</span>
            </div>
        </div>
    )
 }
}

然后我将以下 webpack 配置用于我的样式表的加载程序:

loaders: [
 {
   test: /\.(scss|css)$/,
  loader: 'style-loader!css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]-[local]___[hash:base64:5]!sass-loader?sourceMap'
  }
]

这样一切正常(样式包含在 .js 文件和类中)

但在生产中我应该让浏览器呈现 webpack bundle.js 输出文件中包含的所有类吗?

我宁愿使用我所有的样式使用 webpack(和 ExtracttextPlugin)创建一个 css 文件:

 {
     test: /\.(css|scss)$/,
     loader: ExtractTextPlugin.extract('css-loader' )
 }

并链接在我的 index.html 中生成的 .css

问题是现在我在React 组件中的所有类定义都不再在浏览器中呈现。

我应该如何解决这个问题?

迈克尔·容格(Michael Jungo)

你不能只是从使用 CSS 模块切换到不使用它们,这行不通,因为你的代码依赖于它。也没有理由不在生产中使用 CSS 模块。您想要更改的不是 CSS 模块,而是您包含 CSS 的方式。您可以将它们提取extract-text-webpack-plugin到一个单独的.css文件中,而不是将它放在您的 JavaScript 包中,但您仍然需要对加载器使用相同的配置。

网络包 1

{
  test: /\.(css|scss)$/,
  loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]-[local]___[hash:base64:5]!sass-loader?sourceMap')
}

style-loader如果无法提取 CSS ,第一个参数仅用作后备。

网络包 2

在字符串中ExtractTextPlugin.extract使用options而不是内联查询更改和提高可读性的参数

{
  test: /\.(css|scss)$/,
  loader: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use:  [
      {
        loader: 'css-loader',
        options: {
          sourceMap: true,
          modules: true,
          importLoaders: 1,
          localIdentName: '[name]-[local]___[hash:base64:5]'
        }
      },
      { loader: 'sass-loader', options: { sourceMap: true } }
    ]
  })
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使用Typescript,React和Webpack导入SCSS或CSS模块

使用Webpack,Typescript和React的CSS模块格式错误?

CSS未在React和Webpack的生产中加载

react - 生产中的 webpack sass/scss 模块

Sass与CSS模块和Webpack

如何在React + Webpack中安装和配置外部模块

通过SASS支持在带有Typescript,SASS和CSS模块的React组件库中搜索Webpack配置

在Bootstrap 4和React中使用模块化CSS

使用Webpack从节点模块加载CSS文件

在React组件中使用CSS模块以及由webpack构建的Typescript

CSS模块,React和覆盖CSS类

无法使用Webpack 2.2.0和webpack-dev-server 2.2.1进行HMR(热模块替换)css / scss

使用 Webpack 和 React 在开发环境中模拟外部导入

使用Mocha和Enzyme测试使用React CSS模块的React组件

Webpack和React识别CSS类名称

CSS 样式在开发和生产中表现不同

将React 17与Webpack 5和babel-plugin-react-css-modules(具有样式名称的CSS模块)集成

React-开发和生产中的环境变量

无法理解使用webpack和es6模块的EventEmitter发生了什么

在React中将字符串类名称与CSS-loader和Webpack一起使用

使用Webpack提取CSS时抑制模块输出

如何在create-react-app中使用Sass和CSS模块?

如何在create-react-app和Typescript中使用CSS模块覆盖Material-UI?

使用webpack内联JavaScript和CSS

使用Webpack导入CSS和JS文件

使用react调试webpack配置

Webpack加载器配置为React JS加载CSS和SASS文件

结合使用MaterializeCSS和Webpack-无法解析模块'hammerjs'

使用React和Webpack设置Airbnb ESLint