2017-04-03 31 views
4

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

这是我觉得是我的配置的相关部分:

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那么它的工作原理,但我很明显无法改变主题,因此看起来不对。我应该在这里做什么?

回答

0

请查看关于此导入默认主题的最新文档:https://github.com/material-components/material-components-web/blob/master/docs/theming.md#step-3-changing-the-theme-with-sass 我跟着100%,它采用反应对我的作品,根据这一点,你可能要改线

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

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

和webpack 2应该能够处理它。 让我们知道您是否找到解决方案。