配置Webpack 4.0结合ExtractTextPlugin使用Google Material Design SASS遇阻

嘿，我来帮你搞定这个头疼的Webpack 4编译问题！你推测的方向完全正确——就是Webpack没被配置成能自动识别node_modules里的SASS文件路径，导致编译时找不到依赖。下面我给你一步步拆解解决方案：

1. 先确保装对了必要的依赖包 #

Webpack 4处理SASS需要几个核心loader，而且extract-text-webpack-plugin要装适配Webpack 4的版本，别装错了：

npm install sass-loader node-sass css-loader extract-text-webpack-plugin@next --save-dev

（要是你用的是新版的Material Design Components，记得还要装对应的组件包，比如@material/button这类，根据你要用到的组件来装）

2. 修正Webpack配置文件 #

重点是给sass-loader加上includePaths配置，明确告诉它去node_modules里找SASS文件。我把你的配置补全调整了，直接用就行：

var ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');

module.exports = {
  entry: [
    path.resolve(__dirname, 'react/test/index.js'),
    path.resolve(__dirname, 'styles/main.scss')
  ],
  output: {
    path: path.resolve(__dirname, 'dist'), // 这里是你的输出目录，按需修改
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader', // 提取失败时用style-loader挂载到页面
          use: [
            'css-loader', // 处理CSS语法
            {
              loader: 'sass-loader',
              options: {
                // 关键配置：把node_modules加入SASS的路径解析列表
                includePaths: [path.resolve(__dirname, 'node_modules')]
              }
            }
          ]
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles/main.css') // 提取后的CSS文件输出路径
  ]
};

3. 正确引入Material Design的SASS文件 #

在你的main.scss里，现在就可以正常引入了。比如你用的是Material Design Components（MDC），可以这么写：

// 引入单个组件的SASS
@import "@material/button/mdc-button";
// 或者引入主题基础样式
@import "@material/theme/mdc-theme";

要是你用的是旧版的material-design-lite，就改成：

@import "material-design-lite/src/material-design-lite";

小技巧：如果还是找不到，试试在路径前加~，Webpack会自动识别这是node_modules里的依赖：

@import "~@material/button/mdc-button";

最后排查小细节 #

• 确认node_modules里确实有你要引入的SASS包，没装的话赶紧用npm安装
• 检查导入路径的拼写，大小写要对应（尤其是Linux/macOS环境下）
• 要是还报错，看看Webpack的错误日志里具体是哪个文件找不到，针对性调整路径

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