Я изо всех сил пытаюсь заставить Webpack 4.0 скомпилировать мой SASS, с которым я хочу использовать файлы SASS для дизайна материалов Google. Я думаю, что это проблема с невозможностью доступа к файлам SASS в папке node_modules.
var ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
module.exports = {
//entry: path.resolve(__dirname, 'react/test/index.js'),
entry: [path.resolve(__dirname, 'react/test/index.js'),
path.resolve(__dirname, 'styles/main.scss')],
output: {
path:path.resolve(__dirname, 'web/webroot/_ui/desktop//js'),
filename: 'testOutput.js'
},
devtool: 'sourcemap',
watch: true,
module: {
rules: [
{
test: /\.(css|sass|scss)$/,
//exclude: /node_modules/,
include: path.resolve(__dirname, 'node_modules/@material'),
use:ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader','sass-loader'],
})
},
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.css$/,
exclude: /node_modules/,
use: ['css-loader']
}
]
},
plugins: [
new ExtractTextPlugin({
filename: 'style-soutput.css'
})
]
}
Я подумал, используя:
включают: path.resolve (__dirname, 'node_modules / @ material'),
Включил бы веб-пакет для сбора файлов Material SASS. но я получаю ошибку:
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
@import 'themeColors';
@import "@material/button/mdc-button";
Благодарим Вас за любую помощь, чтобы иметь возможность включить папку SASS материала Google.