Блог

Я пытаюсь включить material design lite в свой проект Angular 2.0 (окончательный вариант) (использует webpack). Я использую эту настройку:

• Я начал проект с Angular Webpack Starter
• импортировано ‘material-design-lite/material.js ‘ в vendor.browser.ts
• переименовал src/app/app.style.css в *scss
• использовал это руководство для обработки файлов scss
• добавлено несколько импортируемых файлов (переменные, микшины и т. Д., В соответствии с этим руководством) В app.style.scss
• добавлено следующее в webpack.common.js

 sassLoader = {
  includePaths: [
    path.resolve(
      __dirname,
      "./node_modules/material-design-lite/src")
  ]
};  

Однако при запуске npm я получаю сообщение об ошибке, в котором говорится, что переменные в app.component.scss не могут быть найдены. Более конкретно, я получаю следующее сообщение об ошибке:

 ERROR in ./src/app/app.style.scss 
Module build failed: 
@import "variables"; 
^ 
   File to import not found or unreadable: variables 
Parent style sheet: stdin 
   in d:Project Files<full-path>srcappapp.style.scss (line 4, column 1)
@ ./src/app/app.component.ts 25:21-48 
@ ./src/app/app.module.ts 
@ ./src/app/index.ts 
@ ./src/main.browser.ts 
@ multi main
  

Похоже, что последний шаг (включение пути к webpack) не работает, однако я не уверен, как это исправить.

Как указал TeoMatthew, файл конфигурации webpack находится в подкаталоге корня проекта, поэтому для ссылки на корень из webpack требуется использовать ‘../’, например, так:

 path.resolve(__dirname, '../node_modules/normalize-scss/sass')