如何在 WebPack 中加载样式

2019-03-13 08:00:00 · 飞浪

介绍 Web开发人员在使用CSS时面临的最大问题之一是CSS是全局的。每个CSS类都是全局暴露的，在更新或添加CSS以实现某些新功能时，很容易无意中破坏Web应用程序的其他部分。当使用R

介绍

Web 开发人员在使用 CSS 时面临的最大问题之一是 CSS 是全局的。每个 CSS 类都是全局暴露的，在更新或添加 CSS 以实现某些新功能时，很容易无意中破坏 Web 应用程序的其他部分。当使用 React 等框架时，在一段时间内管理 CSS 变得更加困难。

这就是 CSS 模块发挥作用的地方。它允许我们编写类似于 JavaScript 变量的作用域 CSS。我们可以为特定组件编写 CSS，并确保它不会泄露给任何其他组件。

CSS 模块是一项很酷的功能，可以与 React 应用程序很好地集成。在本指南中，我们将以 React 应用程序为例，然后添加 CSS 模块。我们还将介绍用于实现此目的的 Webpack 插件。

使用模块化 CSS

我们可以通过两种方式在任何 React 应用程序中使用模块化 CSS。

通过使用 CSS 作为 JavaScript 对象
通过使用 CSS 模块

CSS 作为 JavaScript 对象

将 CSS 编写为 JavaScript 对象要容易得多，尤其是在使用 ReactJS 时，因为您不必偏离 JavaScript 代码来编写 CSS。CSS 类看起来相似，并以属性名称的驼峰式命名。

此外，通过使用组件上的 style 属性，可以将 CSS 编写为 JavaScript 对象，并直接在 React 组件内部使用。

请看下面的例子；

      // lets write some CSS inside of our js
    const myButton = {
        backgroundColor: '#999999',
		margin: '10px',
        padding: '10px',
        border: '2px solid blue',
        width: '100%'
    }
    export default { myButton }

    //Importing style and using inside JSX
    import styles from './mystyles.css.js'

    const button = () => {
        return <button style={styles.myButton}>My Button</button>
    }
    

上面的代码是使用 CSS 作为 JavaScript 对象的示例。此外，这种方法还允许我们为每个元素设置独特的样式。

当我们将 CSS 定义为 JavaScript 对象时，我们可以做的另一件事是使用变量作为 style 属性的值。这样它就可以根据某些条件而改变：

      // lets write some CSS inside of our js
    var myRedBgVar = {
        backgroundColor: 'red'
    }
    var myButton = {
        backgroundColor: myRedBgVar.backgroundColor,
        margin: '10px',
        padding: '10px',
        border: '2px solid blue',
        width: '100%'
    }
    export default { myButton };

    //Importing style and using inside JSX
    import styles from './mystyles.css.js'

    const button = () => {
        return <button style={styles.myButton}>My Button</div>
    }
    

使用 CSS 作为 JavaScript 对象的优点之一是无需额外设置即可实现此功能。由于它只是简单的 JavaScript，因此我们可以轻松使用。此外，虽然在 JavaScript 中使用 CSS 可以扩展，但在某些方面确实存在自身的局限性。

CSS 模块

CSS 模块与我们上面所采用的方法没有太大区别。但是，通过使用 CSS 模块，我们可以编写常规 CSS 样式，然后将其导入到我们的组件中。

下面是一个例子（CSS 代码）：

      // lets add some CSS in myStyle.css
    .button {
      background-color: blue;
      margin: '10px',
      padding: '10px',
      border: '2px solid blue',
      width: '100%'
    }
    

JavaScript 代码如下：

      // Importing and using in a jsx
    import myStyles from './myStyle.css'
    import React from 'react';

    export default class Button extends React.Component {
        render(){
            return (
                <button className={myStyles.button}>My Button</button>
            )
        }
    }
    

在上面的例子中，可以看出 CSS 代码是实际的 CSS，而不是 JavaScript 对象。但是，这本身是行不通的，我们需要添加/配置我们的加载器才能使其工作。此外，这种方法的优点在于，生成的 CSS 文件中的实际类名不会是 .button（如上面的 CSS 中指定的那样），而是看起来像 .button-[some-hash]。通过在每个类名中添加哈希，我们可以确保每个类声明都是唯一的。此外，由于哈希基于内容，即使两个类发生冲突，也是因为它们具有相似的样式。

Webpack 加载器

Webpack 加载器本质上是一个插件，可用于在将文件添加到包之前应用任何转换或操作文件。

我们需要使用两个主要的加载器：

css-loader - 用于解析我们的 CSS 文件并对其应用各种转换。它还有一个 CSS 模块模式，可以采用我们的 CSS 并对类进行哈希处理。
style-loader-这将获取上面生成的输出字符串，并将相同的数据放入<style>标签/元素内。

现在我们需要为 .css 文件添加另一个配置。在这里，我们首先配置 style-loader，然后配置 css-loader，如下所示：

      {
  test: /\.css$/,
  loader: 'style-loader'
}, {
  test: /\.css$/,
  loader: 'css-loader',
  query: {
    modules: true,
    localIdentName: '[name]__[local]___[hash:base64:5]'
  }
}
    

style-loader 的第一个配置不需要任何额外的配置，所以我们应该可以很好地完成它。然后我们需要配置 css-loader。这里，重要的配置是“query”对象，它定义了两个属性：

modules - 将其设置为“true”将启用 CSS 模块模式 localIdentName - '[name] [local] _[hash:base64:5]' 定义生成的 CSS 类的结构应如何。我们不必太担心这个。我们只需要知道这将映射到生成的输出。

运行 Webpack

我们几乎完成了 Webpack 的配置，现在可以运行 Webpack 了。您只需运行“npm start”即可启动 Webpack 开发服务器，转换 CSS 模块并在浏览器中运行。

此外，如果您使用开发服务器，您会发现 CSS 在更改时会自动更新，而无需在浏览器中进行硬刷新，这在开发过程中非常有用。

清理 Webpack 配置

上面使用的 Webpack 配置有一个奇怪的地方，那就是我们必须为 .css 配置两次加载器 - 一次是样式加载器，另一次是 css 加载器。将它们组合成一个会更简洁。但是，一旦我们配置了多个加载器，我们就不能像上面那样传入“查询”对象。相反，我们需要使用 Webpack 的字符串配置。如果我们这样做，我们的配置将如下所示：

      {
    test: /\.css$/,
    loader: 'style-loader!css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]'
}
    

但是，这似乎相当令人困惑，也更难理解。幸运的是，我们有“webpack-combine-loaders”，它使我们能够使用“query”对象语法来配置我们的加载器，而不必重复 test: /.css$/ 行。使用此模块，我们的配置将如下所示：

      {
  test: /\.css$/,
  loader: combineLoaders([
    {
      loader: 'style-loader'
    }, {
      loader: 'css-loader',
      query: {
        modules: true,
        localIdentName: '[name]__[local]___[hash:base64:5]'
      }
    }
  ])
}]
    

这更加简洁，并且很明显我们在同一文件类型（.css）上同时使用了 style-loader 和 css-loader。

安装软件包依赖项

我们需要将上面使用的包添加到 package.json 中的依赖项列表中。运行以下命令执行相同操作：

npm 安装 --save-dev style-loader npm 安装 --save-dev css-loader

此外，如果您计划添加对 SCSS 文件的支持，也可以随意运行以下命令：npm install --save-dev sass-loader npm install --save-dev node-sass

结论

如上所示，CSS 模块是一种非常好的方式来组织任何基于组件的系统中 CSS 代码。在上面的例子中，我们用 React 应用程序展示了这一点，但实际上没有任何代码是 React 特有的。此方法可以轻松地与任何其他框架一起使用，而不会增加任何复杂性。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

如何在 WebPack 中加载样式

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

// lets write some CSS inside of our js const myButton = { backgroundColor: '#999999', margin: '10px', padding: '10px', border: '2px solid blue', width: '100%' } export default { myButton } //Importing style and using inside JSX import styles from './mystyles.css.js' const button = () => { return <button style={styles.myButton}>My Button</button> }

// lets write some CSS inside of our js var myRedBgVar = { backgroundColor: 'red' } var myButton = { backgroundColor: myRedBgVar.backgroundColor, margin: '10px', padding: '10px', border: '2px solid blue', width: '100%' } export default { myButton }; //Importing style and using inside JSX import styles from './mystyles.css.js' const button = () => { return <button style={styles.myButton}>My Button</div> }

// Importing and using in a jsx import myStyles from './myStyle.css' import React from 'react'; export default class Button extends React.Component { render(){ return ( <button className={myStyles.button}>My Button</button> ) } }

{ test: /\.css$/, loader: combineLoaders([ { loader: 'style-loader' }, { loader: 'css-loader', query: { modules: true, localIdentName: '[name]__[local]___[hash:base64:5]' } } ]) }]