首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >无法使用Webpack 2导入物料-组件-网站

无法使用Webpack 2导入物料-组件-网站
EN

Stack Overflow用户
提问于 2017-04-03 22:23:31
回答 1查看 1.6K关注 0票数 4

我正在努力用Webpack 2在React应用程序中正确地实现material-components-web。我想导入Sass文件,这样它们就可以成为主题了。

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

代码语言:javascript
复制
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是这样开始的:

代码语言:javascript
复制
$mdc-theme-primary: #4a90e2;
$mdc-theme-accent: #f22745;
$mdc-theme-background: #fff;
@import '~material-components-web/material-components-web.scss';

我所有的app Sass文件都加载正常,但material-components-web导入似乎根本不起作用,而且也没有抛出任何错误。

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

EN

回答 1

Stack Overflow用户

发布于 2017-04-07 23:31:14

请在这里查看关于导入默认主题的最新文档:https://github.com/material-components/material-components-web/blob/master/docs/theming.md#step-3-changing-the-theme-with-sass我100%遵循,它对我使用React to有效,根据这一点,您可能想要更改行

代码语言:javascript
复制
@import '~material-components-web/material-components-web.scss';

代码语言:javascript
复制
@import "material-components-web/material-components-web";

而webpack二号应该可以应付得来。如果您找到了解决方案,请告诉我们。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/43187195

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档