[ОБНОВЛЕНО ИЗ ОРИГИНАЛЬНОГО ВОПРОСА] Я пытаюсь настроить последнюю версию Angular2 с помощью webpack для обработки sass. Теперь у меня есть scss-файлы. Однако проблема с css сейчас.Устранение проблемы с webpack, угловой 2, css и sass
Я добавил следующее в файл app.component.ts ...
require('../../node_modules/bootstrap/dist/css/bootstrap.css');
require('../../public/styles/styles.scss');
Я получаю сообщение об ошибке сборки от начала НПМ ...
./~/bootstrap/dist/css/bootstrap.css
Module build failed: ReferenceError: window is not defined
bootstrap\dist\css\bootstrap.css doesn't export content
Соответствующие биты webpack.common.js ...
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({ loader: [{ loader: "style-loader" }, { loader: "css-loader" } ] })
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({ loader: [{ loader: "css-loader" }, { loader: "sass-loader" } ] })
}
отрывок из моего package.json ...
"devDependencies": {
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
"codelyzer": "~2.0.0-beta.1",
"faker": "3.1.0",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"json-server": "0.9.4",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"node-sass": "^4.4.0",
"protractor": "~4.0.13",
"raw-loader": "^0.5.1",
"sass-loader": "5.0.1",
"ts-node": "1.2.1",
"tslint": "4.3.0",
"typescript": "2.1.6",
"webdriver-manager": "11.1.1",
"angular2-template-loader": "^0.6.0",
"awesome-typescript-loader": "^3.0.0-beta.18",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "2.0.0-beta.5",
"html-webpack-plugin": "^2.16.1",
"file-loader": "^0.10.0",
"html-loader": "^0.4.3",
"style-loader": "^0.13.1",
"postcss-loader": "1.2.2",
"webpack": "2.2.1",
"webpack-dev-server": "2.3.0",
"webpack-merge": "^2.6.1"
}
Я пытался решить эту проблему в течение нескольких дней. Буду признателен за любую оказанную помощь.
Я удалил свой ответ, попробуйте изменить конфигурацию на основе примеров плагинов. https://github.com/jtangelder/sass-loader –
Просмотрев примеры плагинов, я изменил конфигурацию своего веб-пакета на { test: /\.scss$/, загрузчик: ExtractTextPlugin.extract ({ загрузчик: [{ погрузчик: "CSS-погрузчик" }, { погрузчик: "дерзость-погрузчик" }], fallbackLoader: "стиль-погрузчик" }) } Теперь я получаю эту ошибку «Прогнозный 'стили', чтобы быть массив строк «У меня есть компонент с этим стилемUrls: ['./invoice-list.component.scss']. Если я прокомментирую это, ошибка исчезнет. –
Привет, Ли, установите' raw-loader' и используйте его до 'CSS-loader'. Это должно решить проблему с «Ожидаемыми» стилями, чтобы быть массивом строк. – Ruaghain