Настройка webpack 4.0 для использования дизайна материалов Google SASS с ExtractTextPlugin

Question

Я изо всех сил пытаюсь заставить 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.

Answer 1

Как уже упоминалось в документации по Google Material Design, вам нужно использовать собственный импортер для загрузите все файлы материалов, как показано ниже.

const path = require("path");

function tryResolve_(url, sourceFilename) {
  // Put require.resolve in a try/catch to avoid node-sass failing with cryptic libsass errors
  // when the importer throws
  try {
    return require.resolve(url, { paths: [path.dirname(sourceFilename)] });
  } catch (e) {
    return "";
  }
}

function tryResolveScss(url, sourceFilename) {
  // Support omission of .scss and leading _
  const normalizedUrl = url.endsWith(".scss") ? url : `${url}.scss`;
  return (
    tryResolve_(normalizedUrl, sourceFilename) ||
    tryResolve_(
      path.join(
        path.dirname(normalizedUrl),
        `_${path.basename(normalizedUrl)}`
      ),
      sourceFilename
    )
  );
}

function materialImporter(url, prev) {
  if (url.startsWith("@material")) {
    const resolved = tryResolveScss(url, prev);
    return { file: resolved || url };
  }
  return { file: url };
}

затем обновите sass-загрузчик ниже

{
            loader: 'sass-loader',
            options: {
              importer: materialImporter
            },
          }