使用Webpack将Sass编译为CSS的配置问题求助

我来帮你梳理下配置里的问题，实现你想要的类似sass app.scss : app.css的编译效果，同时保证CSS文件独立输出，不依赖JavaScript加载。

首先看你当前配置里的几个关键错误：

• ExtractTextPlugin的filename配置完全搞反：你把它设为了源SCSS文件路径./_dev/scss/app.scss，它应该是你最终要输出的CSS文件路径。
• 缺少Sass编译必需的loader：只配置css-loader不足以编译SCSS，还需要sass-loader和对应的依赖node-sass。
• scssConfig的output.filename存在混淆：这个配置会被ExtractTextPlugin覆盖，建议设为临时值避免误解。

修正后的完整配置 #

const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

// JavaScript配置部分（保持原有逻辑即可）
const jsConfig = {
  entry: "./_dev/scripts/app.js",
  output: { 
    filename: "./scripts/bundle.js" 
  },
  module: {
    rules: [ 
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: "babel-loader" 
      } 
    ]
  }
};

// SCSS编译配置（重点修正部分）
const scssConfig = {
  entry: "./_dev/scss/app.scss",
  output: { 
    // 该值会被ExtractTextPlugin覆盖，设为临时文件名即可
    filename: "./content/app-temp.js" 
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader", // 插件提取失败时的降级方案（本次场景不会触发）
          use: [
            "css-loader", // 处理CSS中的@import、url()等语法
            "sass-loader" // 将SCSS编译为原生CSS
          ]
        })
      }
    ]
  },
  plugins: [
    // 指定最终输出的CSS文件路径
    new ExtractTextPlugin({
      filename: "./content/app.css"
    })
  ]
};

const config = [scssConfig, jsConfig];
module.exports = config;

下一步操作：安装缺失依赖 #

执行以下命令安装Sass编译必需的工具：

npm install sass-loader node-sass --save-dev

效果说明 #

运行Webpack后，你会得到：

1. 单独生成的./content/app.css文件，直接通过HTML的<link>标签引入即可，完全不依赖JavaScript，禁用JS的用户也能正常加载样式。
2. 保持原有JS打包逻辑，生成./scripts/bundle.js。

整个流程和sass app.scss : app.css的核心效果一致，同时利用Webpack的自动化能力简化后续维护。

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