使用 Webpack 设置 CSS 和 Sass！使用 webpack 设置 CSS 使用 webpack 设置 Sass Extras

2025-06-08

使用 Webpack 设置 CSS 和 Sass！！

使用 webpack 设置 CSS

使用 webpack 设置 Sass

附加功能

样式是前端开发最基础的部分之一。本文将介绍如何在 Webpack 中使用样式。本文是我之前文章的延续，之前我解释了如何使用 Webpack 和 Babel 搭建 React 项目。如果您从未使用 Webpack 搭建过 React 项目，我建议您先阅读我之前的文章，然后再回来阅读本文；或者，如果您恰好已经搭建好 React 项目，并且想知道如何使用样式，那么您来对地方了。

在这篇文章中，我们将逐一了解如何使用 webpack 设置 CSS 和像 Sass 这样的 CSS 预处理器。

我们知道，webpack 是一个模块打包器，它负责分析文件，并将运行应用程序所需的所有代码打包到一个 JavaScript 输出文件中，我们通常将其称为bundle.js。默认情况下，Webpack 只能理解 JavaScript，为了让 webpack 能够理解其他资源，例如.css、.scss等，我们需要借助加载器来编译它。让我们看看具体怎么做。

使用 webpack 设置 CSS

首先，让我们安装一些开发依赖项。



npm i --save-dev css-loader style-loader
Enter fullscreen mode Exit fullscreen mode
  • 定义表明css-loader会像 import/require() 一样解释@import并url()解析它们。这是什么意思呢？css-loader它会从 CSS 文件中获取所有 CSS，并将其生成一个字符串，然后将其传递给style-loader。
  • style-loader将获取此字符串并将其嵌入到index.html中的 style 标签中。

现在让我们在webpack.config.js中添加配置。在模块中的 rules 中添加此行。



...
   module: {
        rules: [
            {
                test: /\.(css)$/,
                use: ['style-loader','css-loader']
            }
        ]
    }
...
Enter fullscreen mode Exit fullscreen mode

此处的属性将告诉testwebpack所有.css文件。use style-loadercss-loader

（注意：webpack 应用加载器的顺序是从最后到第一个，因此如前所述，css-loader将生成将由使用的输出字符串style-loader。）

webpack.config.js的整体内容将是：



const path = require('path');

module.exports = {
    mode: "development",
    entry: path.resolve(__dirname, './src/index.js'),
    devtool: "eval-source-map",
    module: {
        rules: [
          {
             test: /\.(js|jsx)$/,
             exclude: /node_modules/,
             use: ['babel-loader']
          },
          {
             test: /\.(css)$/,
             use: ['style-loader','css-loader']
          }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    output: {
        path: path.resolve(__dirname, './public'),
        filename: 'bundle.js',
    },
    devServer: {
        contentBase: path.resolve(__dirname, './public'),
        hot: true
    },
};
Enter fullscreen mode Exit fullscreen mode

接下来，我们将添加一个包含以下内容的app.css文件。



.container {
    height: 100vh;
    background-color: #E7E3EB;
}

.header {
    padding: 15px 20px;
    background-color: #6200EE;
}

h1 {
    color: #FFF;
}
Enter fullscreen mode Exit fullscreen mode

App.jsx



import React from 'react';
import './app.css';

const App = () => {
    return (
        <div className="container">
            <div className="header">
                <h1>Welcome to React application</h1>
            </div>
        </div>
    )
}

export default App
Enter fullscreen mode Exit fullscreen mode

现在运行npm start，您将在浏览器中看到输出。

截图于 2021-04-28 下午 6.51.19

适合您的生产环境的配置。

如果你已经为生产环境配置了 webpack，那么你需要为使用 CSS 配置不同的配置。首先，安装mini-css-extract-plugin



npm i --save-dev mini-css-extract-plugin
Enter fullscreen mode Exit fullscreen mode

现在提取 miniCssExtractPlugin 并style-loader用替换MiniCssExtractPlugin.loader并添加MiniCssExtractPlugin插件。
MiniCssExtractPlugin提取 CSS 并为每个 JS 文件创建一个 CSS 文件。



const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: "production",
    entry: path.resolve(__dirname, './src/index.js'),
    devtool: "source-map",
    module: {
        rules: [
          {
             test: /\.(js|jsx)$/,
             exclude: /node_modules/,
             use: ['babel-loader']
          },
          {
             test: /\.(css)$/,
             use: [MiniCssExtractPlugin.loader,'css-loader']
          }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    plugins: [new MiniCssExtractPlugin()],
    output: {
        path: path.resolve(__dirname, './public'),
        filename: 'bundle.js',
    },
};
Enter fullscreen mode Exit fullscreen mode

现在运行，您将看到在公共npm run build文件夹中生成的外部文件，例如main.css和main.css.map。如果您想检查构建文件夹是否包含预期的所有内容，可以通过在本地 Web 服务器上运行它来检查，请在命令行上运行此命令。



npx http-server public
Enter fullscreen mode Exit fullscreen mode

这将为您提供一个可以在浏览器中访问的 URL。

使用 webpack 设置 Sass

如果您恰好像我一样更喜欢 Sass 而不是 CSS，那么您需要安装一些包来使用 webpack 设置 Sass。



npm i --save-dev sass-loader node-sass
Enter fullscreen mode Exit fullscreen mode
  • node-sass提供将 Node.js 绑定到 LibSass（Sass 的 C 版本）的功能。sass-loader文档中提到：“sass-loader 要求您自行安装 Node Sass 或 Dart Sass。这样您就可以控制所有依赖项的版本，并选择要使用的 Sass 实现。”本质上，此加载器具有内部依赖项，这些依赖项需要…… node-sass。
  • sass-loader加载 Sass/SCSS 文件并将其编译为 CSS。

现在让我们更新webpack.config.js。



const path = require('path');

module.exports = {
    mode: "development",
    entry: path.resolve(__dirname, './src/index.js'),
    devtool: "eval-source-map",
    module: {
        rules: [
          {
             test: /\.(js|jsx)$/,
             exclude: /node_modules/,
             use: ['babel-loader']
          },
          {
             test: /\.(s(a|c)ss)$/,
             use: ['style-loader','css-loader', 'sass-loader']
          }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    output: {
        path: path.resolve(__dirname, './public'),
        filename: 'bundle.js',
    },
    devServer: {
        contentBase: path.resolve(__dirname, './public'),
        hot: true
    },
};
Enter fullscreen mode Exit fullscreen mode

我们只需要sass-loader在前面添加css-loader，这样首先，.scss文件就会被编译回 CSS，之后的编译过程与上面解释的相同。
接下来，让我们将app.css文件更改为app.scss，并使用我们最喜欢的 sass 功能更新该文件。

应用程序.scss



.container {
    height: 100vh;
    background-color: #E7E3EB;
    .header {
        padding: 15px 20px;
        background-color: #6200EE;
        h1 {
            color: #FFF;
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

现在运行npm start结果将与上面相同，但现在我们已经用 Sass 代替 CSS。

生产环境的 Sass 配置

生产环境的配置与 CSS 设置的配置基本相同，我们将使用相同的配置mini-css-extract-plugin来提取单独的 CSS 文件，只是需要sass-loader在前面添加css-loader，就像之前开发环境的配置一样。更新后的文件如下所示。



const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: "production",
    entry: path.resolve(__dirname, './src/index.js'),
    devtool: "source-map",
    module: {
        rules: [
          {
             test: /\.(js|jsx)$/,
             exclude: /node_modules/,
             use: ['babel-loader']
          },
          {
             test: /\.(s(a|c)ss)$/,
             use: [MiniCssExtractPlugin.loader,'css-loader', 'sass-loader']
          }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    plugins: [new MiniCssExtractPlugin()],
    output: {
        path: path.resolve(__dirname, './public'),
        filename: 'bundle.js',
    },
};
Enter fullscreen mode Exit fullscreen mode

现在通过运行再次构建您的项目npm run build并通过在本地网络服务器中运行检查输出。

附加功能

恭喜！！🎉 现在，您已成功使用 webpack 在 React 项目中设置了 CSS 和 Sass，但您的项目还需要一些比样式更丰富的内容，例如图片和字体，以使其更具吸引力和用户友好性。我将提供一个简短的教程，介绍如何使用 webpack 设置它们。

让我们添加一个开发依赖项来支持这些文件格式。



npm i --save-dev url-loader
Enter fullscreen mode Exit fullscreen mode

字体设置

首先，下载字体。为了方便本教程，我从google fonts下载了 Open Sans Italic字体，并将其移动到文件夹(src/Assets/Fonts/)。现在创建一个font.scss文件，并在其中添加字体。



@font-face {
    font-family: 'Open Sans Italic';
    src: url('./Assets/Fonts/OpenSansItalic.eot');
    src: url('./Assets/Fonts/OpenSansItalic.eot?#iefix') format('embedded-opentype'),
         url('./Assets/Fonts/OpenSansItalic.woff') format('woff'),
         url('./Assets/Fonts/OpenSansItalic.ttf') format('truetype'),
         url('./Assets/Fonts/OpenSansItalic.svg#OpenSansItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}
Enter fullscreen mode Exit fullscreen mode

让我们在app.scss中导入字体文件并将字体应用于<h1>标签。

应用程序.scss



@import url(./font.scss);

.container {
    height: 100vh;
    background-color: #E7E3EB;
    .header {
        padding: 15px 20px;
        background-color: #6200EE;
        h1 {
            color: #FFF;
            font-family: 'Open Sans Italic';
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

接下来，更新webpack.config.js以支持所有文件格式。



...
   rules: [
          ....
          {
                test: /\.(woff|woff2|eot|ttf|svg)$/,
                use: {
                  loader: 'url-loader',
                },
          },
          ....
          ]
...
Enter fullscreen mode Exit fullscreen mode

现在，运行npm start，你的字体将被更新。

图像设置

要在 webpack 中使用图片，我们只需要在测试中添加所需的图片文件扩展名即可url-loader。
更新webpack.config.js



...
   rules: [
          ....
          {
                test: /\.(woff|woff2|eot|ttf|svg|jpg|png)$/,
                use: {
                  loader: 'url-loader',
                },
          },
          ....
          ]
...
Enter fullscreen mode Exit fullscreen mode

现在，让我们更新app.jsx和app.scss。

App.jsx



import React from 'react';
import './app.scss';

const App = () => {
    return (
        <div className="container">
            <div className="header">
                    <h1>Welcome to React application</h1>
            </div>
            <div className="react-logo"></div>
        </div>
    )
}

export default App
Enter fullscreen mode Exit fullscreen mode

应用程序.scss



@import url(./font.scss);

.container {
    height: 100vh;
    background-color: #E7E3EB;
    .header {
        padding: 15px 20px;
        background-color: #6200EE;
        h1 {
            color: #FFF;
            font-family: 'Open Sans Italic';
        }
    }

    .react-logo {
        background: url('./Assets/Images/react-logo.png') no-repeat center;
        height: 500px;
        width: 500px;
        background-size: contain;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
Enter fullscreen mode Exit fullscreen mode

现在让我们再次运行npm start并在浏览器中查看输出。

截图于 2021-04-29 上午 2.06.17

我们可以看到，图片已添加，字体也已更新。
本教程中使用的所有加载器都有很多选项，建议您阅读文档并根据项目需求使用它们，或者您也可以自行探索。

如果您喜欢它，请不要忘记给予❤️，感谢您的阅读，如果您想支持我，那么您可以给我买杯咖啡😃

祝你编程愉快！🧑🏻‍💻

鏂囩珷鏉ユ簮锛�https://dev.to/deepanjangh/setting-up-css-and-sass-with-webpack-3cg
Devto 翻译
PREV
反应性在 Vue.js 中如何工作？
NEXT
八大 Web 开发技术和框架