Как включить внешний файл css с помощью Webpack и Angular2?

Question

Я пытаюсь добавить внешнюю ссылку на файл CSS в Angular2 с помощью Webpack. Мой CSS определяется как

{ test: /\.css$/, loader: "style-loader!css-loader" }, 

в моем файле webpack.config.js, и я могу загрузить CSS просто отлично, делая в голове машинопись файла:

require("./styles/style.css"); 

Однако, когда я пытаюсь и загрузить CSS файл встроенный внутри компонента, как в:

@Component({ 
selector: 'todo-list', 
template: ` 
      <section class="todoapp">     
      </section> 
`, 
styles: [require('./Todolist.css')], // <-------------- 
directives: [TodoItem], 
providers: [TodosService] 
... 

Я получаю ошибку: ИСКЛЮЧЕНИЕ: TypeError: s.replace не является функцией

Я также попытался загрузить CSS с помощью:

styles: [require('style-loader!css-loader!./Todolist.css')] 

, но не так много удачи

любой помощи

С уважением

Шоном

Answer 1

Что сделал трюк был для загрузки css в качестве исходного текста в webpack.config.js

{ 
    test: /\.css$/, 
    loader: 'raw!postcss' 
}, 

С уважением

Answer 2

Я отправил ответ на подобный вопрос, я надеюсь, что это поможет вам понять, как styles/styleUrls работы в angular2. Есть фрагмент кода, который я доказал, чтобы добавить css в приложение через ваш компонент.

Load external css style into Angular 2 Component

Answer 3

Мое текущее решение для WebPack 2 с угловыми 2 для Css или SCSS погрузчика;

{ 
     test: /\.css$/, 
     loader: [ 
      ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader: 'css-loader' }), 
      'to-string-loader', 
      'css-loader' 
     ], 
     exclude: [helpers.root('Content')], 
     include: [helpers.root('App')] 
    }, 
    { 
     test: /\.scss$/, 
     loader: [ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css-loader'] }), 
      'to-string-loader', 
      'css-loader', 
      'sass-loader' 
     ], 
     exclude: [helpers.root('Content')], 
     include: [helpers.root('App')] 
    }, 

Плагины:

new ExtractTextPlugin({ filename: "[name].css" }), 

И теперь вы можете использовать следующие в компоненте

@Component({ 
    selector: 'logmonitor', 
    styleUrls: ['./logmonitor.component.scss', './logmonitor.component.css'], 
    templateUrl: './logmonitor.component.html' 
}) 

мои текущие DevDependencies являются:

"devDependencies": { 
    "@types/node": "6.0.51", 
    "angular2-template-loader": "0.6.0", 
    "awesome-typescript-loader": "2.2.4", 
    "css-loader": "0.26.1", 
    "css-to-string-loader": "0.1.2", 
    "file-loader": "0.9.0", 
    "url-loader": "0.5.7", 
    "html-loader": "0.4.4", 
    "svg-url-loader": "1.1.0", 
    "less": "2.7.1", 
    "less-loader": "2.2.3", 
    "node-sass": "3.13.0", 
    "sass-loader": "4.0.2", 
    "style-loader": "0.13.1", 
    "raw-loader": "0.5.1", 
    "to-string-loader": "1.1.5", 
    "clean-webpack-plugin": "0.1.4", 
    "extract-text-webpack-plugin": "2.0.0-beta.4", 
    "html-webpack-plugin": "2.21.0", 
    "webpack-notifier": "1.4.1", 
    "webpack": "2.1.0-beta.27", 
    "webpack-dev-middleware": "1.8.4", 
    "webpack-dev-server": "2.1.0-beta.12", 
    "webpack-md5-hash": "0.0.5", 
    "webpack-merge": "0.17.0", 
    "typescript": "2.0.10", 
    "typings": "2.0.0" 
} 

Update для Webpack 2.2.1 и extract-text-webpack-plugin 2.0.0-rc.3 здесь вышеприведенное решение больше не работает.

addional devdependencies

"extract-text-webpack-plugin": "2.0.0-rc.3", 
"postcss-loader": "1.3.0", 
"postcss-import": "9.1.0", 
"autoprefixer": "6.7.2", 
"webpack": "2.2.1", 

вам нужно добавить postcss.config.JS в корне вашего приложения с содержанием

module.exports = { 
    plugins: [ 
     require('postcss-import')(), 
     require('autoprefixer')() 
    ] 
}; 

и новое правило для СКС является следующая

{ 
    test: /\.scss$/, 
    loader: [ 
     { loader: 'raw-loader' }, 
     { loader: 'sass-loader', query: { sourceMaps: true } }, 
     { loader: 'postcss-loader' } 
    ], 
    exclude: [helpers.root('Content')], 
    include: [helpers.root('App')] 
} 

Answer 4

модулей вам нужно будет установить:

css-loaderstyle-loader и опционально, но рекомендуетсяurl-loader

Изменения в WebPack конфигурацию (развития) module: { loaders: [ // CSS { test: /\.css$/, loader: "style-loader!css-loader", }, /* rest of your loaders */ ]

В главном файле JavaScript включает файл CSS

import '../css/bootstrap.min.css';

Теперь в случае начальной загрузки, в частности, вы будете получить такие ошибки:

ERROR in ./~/css-loader!./client/css/bootstrap.min.css Module not found: Error: Cannot resolve module 'url-loader' @ ./~/css-loader!./client/css/bootstrap.min.css 6:3278-3330 6:3348-3400

ERROR in ./~/css-loader!./client/css/bootstrap.min.css Module not found: Error: Cannot resolve module 'url-loader' @ ./~/css-loader!./client/css/bootstrap.min.css 6:3449-3503

ERROR in ./~/css-loader!./client/css/bootstrap.min.css Module not found: Error: Cannot resolve module 'url-loader' @ ./~/css-loader!./client/css/bootstrap.min.css 6:3533-3586

В этом случае и нужно будет скачать Названные файлы локально и добавить эту запись в свой WebPack конфигурации (внутри "loaders" секции, как и первый выше)

{ 
    test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/, 
    loader: 'url-loader', 
    options: { 
     limit: 10000 
    } 
}] 

Вот почему и нужно установить URL -loader, но это требуется только в том случае, если ваш css полагается на другие файлы изображений/шрифтов.

Примечание: Видимо для производства использовать его лучше использовать более сложные настройки, которые вовлекают ExtractTextPlugin упоминается @squadwuschel

Здесь все детали, возможно, потребуется https://webpack.github.io/docs/stylesheets.html