Невозможно импортировать таблицы стилей из node_modules без тильды (~) - PullRequest
Новая
       39

Невозможно импортировать таблицы стилей из node_modules без тильды (~)

2 голосов
/ 01 мая 2019

Я пытаюсь создать простое веб-приложение с material-components-vue и vue-cli с webpack, однако я обнаружил, что не могу импортировать таблицы стилей из node_modules без предшествующего ~.

Я перепробовал несколько конфигов webpack / vue-cli и в итоге получил конфигурацию в vue.config.js, передающую параметры загрузчика.

Мой vue.config.js выглядит так: 

module.exports = {
    css: {
      loaderOptions: {
        sass: {
          includePaths: [
              './node_modules', //here I include node_modules
            ]
        },
      }
    }
  }

Так что я ожидаю, что смогу импортировать такие вещи: 

@import 'normalize/normalize'

(при условии, что у меня есть каталог normalize в моем node_modules, который содержит файл normalize.scss)

Однако webpack выдает ошибку, говоря, что не может найти модуль.
Но это работает: 

@import '~normalize/normalize'

Это не было бы проблемой, если бы все @import были написаны мной, но, поскольку я использую сторонний модуль с @import s внутри, webpack не компилируется.

РЕДАКТИРОВАТЬ 1:

Как @ Styx попросили

Поделитесь ещё конфигами, пожалуйста

и

показать вывод vue inspect --rule scss и весь файл с этим проблемным импортом

Вот оно:

Мой проблемный файл довольно пуст: 

<template>
  <div id="app">
    <m-button>Hello</m-button>
  </div>
</template>

<script>
import Vue from 'vue'
import Button from 'material-components-vue/dist/button'
Vue.use(Button)

export default {
  name: 'App',
  components: {
}
</script>

<style lang="scss">
@import "~material-components-vue/dist/button/styles"; //this works
@import "material-components-vue/dist/button/styles"; //but this does not
</style>

Мой вывод из vue inspect --rule scss находится здесь

Все остальные конфиги сгенерированы vue init webpack <name>

РЕДАКТИРОВАТЬ 2: Точные шаги для воспроизведения этой проблемы:

  1. Инициализация приложения vue-webpack: 
vue init webpack .
  1. Vue build: Runtime + Compiler (по умолчанию)
  2. Vue-роутер: нет

  3. Менеджер пакетов: npm

  4. Затем установите sass-загрузчик 

npm i -D sass-loader node-sass
  1. Создайте файл vue.config.js и заполните его следующим текстом: 
module.exports = {
    css: {
      loaderOptions: {
        sass: {
          includePaths: [
              './node_modules', //here I include node_modules
            ]
        },
      }
    }
  }

  1. После этого установите модуль, содержащий scss / sass (Например, для material-components-web, npm i material-components-web)

  2. Затем создайте импорт в таблицу стилей, расположенную в node_modules, например: 

@import '@material/button/mdc-button'; //mdc-button comes with material-components-web
  1. Наконец, запустите сервер разработки: 
npm run dev
  1. Будет выдана следующая ошибка: 
 ERROR  Failed to compile with 1 errors                                                                        11:36:35 AM

 error  in ./src/App.vue

Module build failed: 
@import '@material/button/mdc-button';
^
      File to import not found or unreadable: @material/button/mdc-button.
      in /home/maxim/projects/holiday.js/stackoverflow/src/App.vue (line 18, column 1)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compil
er?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"s
ourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-359 13:3-17:5 14:22-367
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Кстати, в первом примере я хотел импортировать material-components-vue/dist/foo/styles, но здесь я импортирую @material/foo.

1 Ответ

1 голос
/ 03 мая 2019

В этой конфигурации vue.config.js игнорируется .Этот файл используется @vue/cli-service, но вместо этого вы используете webpack-dev-server.Таким образом, ваш sass-loader не получает эту опцию includePaths.

Вы можете использовать современную команду vue create <app-name> или, если вы хотите изменить существующий проект:

  1. Открыть build/utils.js файл.

  2. Найти return ... в exports.cssLoaders Функция: 

    return {
  ...
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),
  ...
}

  3. Изменить его следующим образом: 

    const includePaths = [path.resolve(__dirname, '..', 'node_modules')];
return {
  ...
  sass: generateLoaders('sass', { indentedSyntax: true, includePaths }),
  scss: generateLoaders('sass', { includePaths }),
  ...
}

  4. Удалить неиспользуемый vue.config.js файл.

...