Материал Material.io с ошибкой в ​​веб-пакете "Не удается найти таблицу стилей для импорта" - PullRequest
Новая
       65

Материал Material.io с ошибкой в ​​веб-пакете "Не удается найти таблицу стилей для импорта"

1 голос
/ 18 марта 2020

Я попытался использовать matrial.io с веб-пакетом, как описано в material.io, начало работы со следующими конфигурациями:

webpack.config. js -> точно так же, как пример 

const autoprefixer = require('autoprefixer');

module.exports = {
    entry: ['./app.scss'],
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'bundle.css',
                        },
                    },
                    {loader: 'extract-loader'},
                    {loader: 'css-loader'},
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [autoprefixer()]
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sassOptions: {
                                implementation: require('sass'),
                                includePaths: ['./node_modules'],
                            },
                        },
                    }
                ],
            },
        ],
    },
};

app.s css -> точно так же, как пример 

@use "~@material/ripple";

.test {
  @include ripple.surface;
  @include ripple.radius-bounded;
  @include ripple.states;
}

пакет. json

{
    "private": true,
    "scripts": {
        "build": "webpack --config=webpack.config.js"
    },
    "devDependencies": {
        "autoprefixer": "^9.7.4",
        "css-loader": "^3.4.2",
        "extract-loader": "^5.0.1",
        "file-loader": "^6.0.0",
        "postcss-loader": "^3.0.0",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "webpack": "^4.42.0",
        "webpack-cli": "^3.3.11"
    },
    "dependencies": {
        "material-components-web": "^4.0.0"
    }
}

Однако, когда я запускаю npm run build, я получаю следующую ошибку: 

ERROR in ./app.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

@use "~@material/ripple";
^
      Can't find stylesheet to import.
  ╷
1 │ @use "~@material/ripple";
  │ ^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  stdin 1:1  root stylesheet
      in /path-to-file/app.scss (line 1, column 1)
 @ multi ./app.scss main[0]

I также попробовал gulp, но я получаю ту же ошибку.

Есть идеи, как я могу заставить это работать?

Я также создал репо для этого. Вы можете клонировать: https://github.com/nazari-dev/material.io

Ответы [ 2 ]

2 голосов
/ 20 марта 2020

Я добавляю альтернативный ответ с другим мышлением и меньшим количеством шагов, таким образом:

  1. Я просто обновляю sass и sass-loader и определенно material-components-web до последние версии. поэтому в конце этого обновления ваш пакет . json выглядит следующим образом: 

    {
  "private": true,
  "scripts": {
    "build": "webpack --config=webpack.config.js"
  },
  "devDependencies": {
    "autoprefixer": "^9.7.4",
    "css-loader": "^3.4.2",
    "extract-loader": "^5.0.1",
    "file-loader": "^6.0.0",
    "postcss-loader": "^3.0.0",
    "sass": "^1.26.3",
    "sass-loader": "^8.0.2",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "material-components-web": "^5.1.0"
  }
}

  2. Затем в файле app.scss используйте миксины, подобные следующим : 

    @use "~@material/ripple/index";

.test {
  @include index.surface;
  @include index.radius-bounded;
  @include index.states;
}

Затем по команде npm run build вы получите успешную сборку , фактически вы пропустили совпадение с последними версиями sass, sass-loader и material-components-web, тогда вы использовали последние документы, и у них есть некоторые конфликты друг с другом, и это приводит к вашей ошибке.

?, Во втором решении я увидел странную вещь, когда я пишу пример в точности похож на данную ссылку, @use '@material/button'; работает хорошо, и парсер может видеть _index.scss внутри папки node_modules/@material/button. но когда я переключаюсь на вашу потребность, я имею в виду @use "@material/ripple"; в точности как эту ссылку , парсер не может увидеть _index.scss внутри папки node_modules/@material/ripple и, несомненно, это происходит от package.json модуля пульсации. потому что в модуле package.json из ripple есть "main": "dist/mdc.ripple.js" и "module": "index.js", которые я не знаю, почему автор заявляет об этом, мы вынуждены использовать @use "~@material/ripple/index"; только для этих объявлений.

Я оставляю проблему за эту странную вещь.

2 голосов
/ 20 марта 2020

На самом деле, вы не подчиняетесь инструкции о начале работы с material.io, но если вы будете следовать, вы не добьетесь успеха. на основе открытой проблемы и некоторых других проблем @ material имеет много проблем. Особенно это имеет проблемы с sass-loader. определенно, я предлагаю вам не использовать его и стремиться найти лучшее решение.

Но, для текущей ошибки сборки, выполните следующие шаги для успешной сборки:

  1. Создайте пользовательский импортер функций и поместите его в верхнюю часть файла конфигурации вашего веб-пакета: 

    function tryResolve_(url, sourceFilename) {
    try {
        return require.resolve(url, {paths: [path.dirname(sourceFilename)]});
    } catch (e) {
        return '';
    }
}

function tryResolveScss(url, sourceFilename) {
    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};
}

  2. Измените конфигурацию sass-loader в файле конфигурации веб-пакета, как показано ниже: 

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

  3. Обновите пакет sass npm с помощью следующей команды: "sass": "^1.26.3": 

    npm update sass

  4. Удалите ~ из app.scss файла. потому что мы используем нашу функцию импорта костюмов, поэтому эта тильда не может быть разрешена нашей новой функцией импорта. а затем напрямую импортируйте частичный файл _mixins.scss. таким образом, у нас есть: 

    @use "@material/ripple/mixins";

  5. Вместо включения surface в ripple.surface вы должны импортировать его непосредственно из файла mixins. Я не знаю, почему пример напишите как @include ripple.surface; и импортируйте пульсацию из @use "@material/ripple";! из-за того, что _ripple.scss файл не существует и соответственно поверхность тоже не существует. Я прочитал @ use do c sass и понимаю, что @ use можно использовать при наличии файла sass, поэтому я думаю, что импортировать как этот пример не для варианта использования, такого как повторное производство . 

    @include mixins.mdc-ripple-surface;

  6. Наконец, ваш файл app.scss должен выглядеть следующим образом: 

    @use "@material/ripple/mixins";

.test {
  @include mixins.mdc-ripple-surface;
  @include mixins.mdc-ripple-radius-bounded;
}

В конце команда npm run build успешно выполняется.

...