解决在 Webpack 中使用 styled-components 和 LESS 出错的问题-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常使用 CSS 预处理器和 CSS-in-JS 库来帮助我们更高效地编写样式。LESS 和 styled-components 就是其中比较常用的两个工具。

然而，当我们同时在 Webpack 中使用 LESS 和 styled-components 时，可能会遇到一些问题。本文将介绍这些问题以及如何解决它们。

问题描述

在使用 Webpack 打包时，我们可以使用 style-loader 和 css-loader 将 CSS 样式打包成 JS 文件，然后在页面中引入。但是，当我们想要使用 LESS 或者 styled-components 时，可能会出现以下错误：

Module build failed: Error: Cannot find module 'less'
Module build failed: Error: Cannot find module 'styled-components'

这是因为 Webpack 默认只能识别 .css 文件，而无法直接解析 .less 或者 .js 中的 CSS-in-JS 代码。因此，我们需要对 Webpack 进行配置来解决这个问题。

解决方法

使用 less-loader 和 styled-components Webpack 插件

解决这个问题的方法是在 Webpack 中添加相应的 loader 和插件。首先，我们需要安装 less-loader 和 styled-components：

npm install --save-dev less-loader styled-components

然后，在 Webpack 配置文件中添加以下代码：

// javascriptcn.com 代码示例
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-react']
            }
          },
          {
            loader: 'styled-components-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
    new webpack.ProvidePlugin({
      React: 'react'
    }),
    new StyledComponentsWebpackPlugin()
  ]
};

这里，我们使用了 less-loader 和 styled-components-loader 来解析 LESS 和 styled-components 代码。注意，我们需要将 less-loader 放在 css-loader 之前，这是因为 less-loader 会将 LESS 文件编译成 CSS 文件，然后再由 css-loader 处理。

另外，我们还需要添加 StyledComponentsWebpackPlugin 插件来帮助 Webpack 处理 styled-components 代码。

配置 styled-components babel 插件

如果你的项目中使用了 styled-components，你还需要在 .babelrc 中添加以下配置：

// javascriptcn.com 代码示例
{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "ssr": true,
        "displayName": true,
        "fileName": true
      }
    ]
  ]
}

这里，我们使用了 babel-plugin-styled-components 插件来处理 styled-components 代码。其中，ssr 表示是否支持服务端渲染，displayName 表示是否需要生成样式名称，fileName 表示是否需要生成文件名。

示例代码

为了更好地理解以上内容，我们来看一个具体的示例代码。假设我们有一个 Button 组件，它使用了 styled-components 和 LESS：

// javascriptcn.com 代码示例
import styled from 'styled-components';
import './Button.less';

const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'white'};
  color: ${props => props.primary ? 'white' : 'black'};
`;

export default Button;

.Button {
  margin: 10px;
}

我们需要在 Webpack 配置文件中添加以下代码：

// javascriptcn.com 代码示例
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-react']
            }
          },
          {
            loader: 'styled-components-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
    new webpack.ProvidePlugin({
      React: 'react'
    }),
    new StyledComponentsWebpackPlugin()
  ]
};

然后，在组件中使用：

// javascriptcn.com 代码示例
import React from 'react';
import Button from './Button';

function App() {
  return (
    <div>
      <Button>Normal Button</Button>
      <Button primary>Primary Button</Button>
    </div>
  );
}

export default App;

这样，我们就可以在 Webpack 中正确地使用 styled-components 和 LESS 了。

总结

在 Webpack 中同时使用 styled-components 和 LESS 可能会遇到一些问题，但通过添加相应的 loader 和插件，我们可以很容易地解决这个问题。希望这篇文章能够帮助你更好地使用这些工具。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/655b00c3d2f5e1655d52b55d