设置webpack 4.0以将Google物料设计SASS与ExtractTextPlugin一起使用

问题描述

我正在努力获取Webpack 4.0来编译要与Google物料设计SASS文件一起使用的SASS.我认为无法访问node_modules文件夹中的SASS文件是一个问题.

I'm struggling to get Webpack 4.0 to compile my SASS which I want to use Google material design SASS files with. I think it is an issue with not being able to access the SASS files in the node_modules folder.

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'
    })
]

}

我想通过使用:

将使webpack能够拾取Material SASS文件.但是我得到了错误:

Would enable webpack to pick up the Material SASS files. but I get the error:

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";

感谢任何帮助，以便能够包含Google物料SASS文件夹.

Appreciate any help to be able to include the Google material SASS folder.

推荐答案

如Google Material Design文档中所述，您需要使用自定义导入程序来 如下所示加载所有材料文件.

As Mentioned in the Google Material Design docs, you need to use custom importer to load all material files as shown below.

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 };
}

然后使用下面的

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

这篇关于设置webpack 4.0以将Google物料设计SASS与ExtractTextPlugin一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！