无法使用 Webpack 2 导入 material-components-web

Posted 2023-02-22

【中文标题】无法使用 Webpack 2 导入 material-components-web

【英文标题】：Unable to import material-components-web using Webpack 2

【发布时间】：2017-08-28 11:18:22

【问题描述】：

我正在努力使用 Webpack 2 在 React 应用程序中正确实现 material-components-web。我想导入 Sass 文件以便它们可以主题化。

以下是我认为与我的配置相关的部分：

var webpackConfig = module.exports = 
  context: path.resolve(__dirname, '..'),
  entry: 
    'main': [
      './src/theme/main.scss',
      './src/client.js'
    ]
  ,
  module: 
    rules: [
      
        test: /\.scss$/,
        use: [
          
            loader: 'style-loader',
          , 
            loader: 'css-loader',
            options: 
              modules: true,
              importLoaders: 3,
              sourceMap: true,
              localIdentName: '[local]___[hash:base64:5]'
            
          , 
            loader: 'autoprefixer-loader',
            options: 
              browsers: 'last 2 version'
            
          , 
            loader: 'resolve-url-loader',
          , 
            loader: 'sass-loader', // compiles Sass to CSS
            options: 
              outputStyle: 'expanded',
              sourceMap: true,
              includePaths: ['../src', '../node_modules', '../node_modules/@material/*']
                .map(d => path.join(__dirname, d))
                .map(g => glob.sync(g))
                .reduce((a, c) => a.concat(c), [])
            
          ,
        ],
      
    ]
  ,
  resolve: 
    modules: [
      'src',
      'node_modules'
    ],
    extensions: ['.json', '.js', '.jsx', '.scss']
  
;

我从 main.scss 开始：

$mdc-theme-primary: #4a90e2;
$mdc-theme-accent: #f22745;
$mdc-theme-background: #fff;
@import '~material-components-web/material-components-web.scss';

我所有的应用程序 Sass 文件加载正常，但 material-components-web 导入似乎根本不起作用，但也不会引发任何错误。

如果我将'material-components-web/dist/material-components-web.min.css' 添加到entry.main，那么它可以工作，但是我显然无法轻松更改主题，所以这似乎是错误的。我应该在这里做什么？

【参考方案1】：

请在此处查看有关导入默认主题的最新文档：https://github.com/material-components/material-components-web/blob/master/docs/theming.md#step-3-changing-the-theme-with-sass 我遵循了 100%，它适用于我使用 React 来，根据这个你可能想要改变这条线

@import '~material-components-web/material-components-web.scss';

到

@import "material-components-web/material-components-web";

并且 webpack 2 应该能够处理它。 如果您找到了解决方案，请告诉我们。