Webpack下Sass与Stylus样式合并及模块导入解析问题

我来帮你搞定这个问题——之前我也试过直接在Sass里@import Stylus文件，结果发现sass-loader根本不买账，因为它只认Sass语法，不会去处理其他预处理器的文件。下面给你两种靠谱的实现方式，都是基于Webpack的正确配置思路：

1. 先安装必要依赖 #

首先得把所有需要的loader和依赖装全，注意现在sass-loader已经用官方的sass包替代废弃的node-sass了：

npm install sass sass-loader stylus stylus-loader css-loader style-loader --save-dev
# 要是用Yarn的话：
yarn add sass sass-loader stylus stylus-loader css-loader style-loader -D

如果生产环境要提取单独的CSS文件，还得装mini-css-extract-plugin：

npm install mini-css-extract-plugin --save-dev

2. 配置Webpack规则 #

核心思路是让Webpack分别识别.scss和.styl文件，给它们分配对应的loader链。下面是完整的webpack.config.js示例：

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

module.exports = {
  // 入口可以是一个JS文件，用来导入所有样式
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true // 每次打包清空dist目录
  },
  module: {
    rules: [
      // 处理Sass文件：sass-loader编译成CSS → css-loader解析 → 注入/提取
      {
        test: /\.scss$/,
        use: [
          // 开发环境用style-loader把CSS注入页面，生产用插件提取成文件
          process.env.NODE_ENV === 'production' 
            ? MiniCssExtractPlugin.loader 
            : 'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      // 处理Stylus文件：stylus-loader编译 → css-loader解析 → 注入/提取
      {
        test: /\.styl$/,
        use: [
          process.env.NODE_ENV === 'production' 
            ? MiniCssExtractPlugin.loader 
            : 'style-loader',
          'css-loader',
          'stylus-loader'
        ]
      }
    ]
  },
  resolve: {
    // 让Webpack能自动解析这些扩展名，导入时可以省略后缀
    extensions: ['.scss', '.styl', '.css', '.js']
  },
  plugins: [
    // 生产环境提取CSS到单独文件
    ...(process.env.NODE_ENV === 'production' ? [
      new MiniCssExtractPlugin({
        filename: 'bundle.css'
      })
    ] : [])
  ]
};

3. 导入样式的两种方式 #

方式一：通过JS入口统一导入 #

在你的入口JS文件（比如src/index.js）里同时导入Sass和Stylus文件：

// 导入你的主Sass文件
import './app.scss';
// 导入Stylus样式文件
import './styles/main.styl';

Webpack会自动处理这两个文件，把它们编译合并成最终的CSS（开发环境注入页面，生产环境生成单独的bundle.css）。

方式二：在样式文件中互相导入 #

如果你习惯在Sass里导入Stylus（反过来也行），只要Webpack配置了正确的规则，直接写就行：

// app.scss里导入Stylus文件
@import './styles/main.styl';

// 其他Sass代码...

Webpack会识别到.styl扩展名，自动调用stylus-loader处理这个文件，最后合并到一起。

为什么之前的方法不行？ #

你之前直接在app.scss里@import Stylus文件失败，是因为sass-loader只负责编译Sass语法，它不会去解析非Sass的文件导入。Webpack的loader是按文件类型分工的，必须让Webpack知道遇到.styl文件时要用stylus-loader处理，这样导入才能生效。

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