Невозможно импортировать материал-компоненты-сеть с помощью Webpack 2
Я изо всех сил пытаюсь реализовать material-components-web
в приложении React правильно с Webpack 2. Я хочу импортировать файлы 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 должен быть в состоянии справиться с этим. Дайте нам знать, если вы нашли решение.