Laravel+React项目如何配置webpack.mix.js使用CSS Loaders？

Hey there! Let's get your CSS loaders up and running in your Laravel Mix setup. Since you already have css-loader and style-loader installed as dev dependencies, here's how to adjust your webpack.mix.js to leverage them properly:

Updated webpack.mix.js Configuration #

let mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

// Bundle your React application and process JS/CSS imports
mix.react('resources/assets/js/app.js', 'public/js')
   // Keep your existing Sass compilation if you still need it
   .sass('resources/assets/sass/app.scss', 'public/css')
   // Extend Webpack to use your installed CSS loaders
   .webpackConfig({
       module: {
           rules: [
               {
                   // Target all .css files in your project
                   test: /\.css$/,
                   // Use style-loader (injects CSS into <style> tags) and css-loader (parses CSS imports/urls)
                   use: [
                       'style-loader',
                       'css-loader'
                   ]
               }
           ]
       }
   });

Key Explanations #

• React Component CSS Imports: This setup lets you directly import CSS files in your React components (like import './styles.css') — Webpack will use css-loader to resolve any @import statements or url() references in your CSS, then style-loader to inject the compiled styles into your page's <style> tags.
• Keeping Sass Compilation: We retained your original .sass() call since you mentioned using it — this will still compile your Sass files to CSS as before, while the new rule handles standalone CSS files imported in React.
• Production Consideration: If you're building for production, you might want to extract CSS into a separate file instead of injecting it (for better performance). To do that, replace style-loader with MiniCssExtractPlugin.loader (you'll need to install mini-css-extract-plugin first via npm install --save-dev mini-css-extract-plugin), and add the plugin to your Webpack config:

  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  
  // ... rest of your config
  .webpackConfig({
       plugins: [new MiniCssExtractPlugin()],
       module: {
           rules: [
               {
                   test: /\.css$/,
                   use: [
                       MiniCssExtractPlugin.loader,
                       'css-loader'
                   ]
               }
           ]
       }
   });
  

Test It Out #

Add a simple CSS import to one of your React components, run npm run dev, and check if the styles are applied to your page. If everything works as expected, you're good to go!

内容的提问来源于stack exchange，提问作者its_tayo