Включите загрузку с помощью webpack

Я разрабатываю расширение хром. Я использую boostrap 3 для пользовательского интерфейса.Включите загрузку с помощью webpack

doctype html 

html 
    head 
    meta(charset='UTF-8') 
    title (Boilerplate Popup) 
    link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css") 
    style. 
     body { width: 500px; } 

    body 
    #root 
    script(src=env == 'prod' ? '/js/ext.bundle.js' : 'http://localhost:3000/js/ext.bundle.js')

Вот как я был использован для включения boostrap.
localhost: 3000 - это сервер, созданный с веб-сервером webpack.

На данный момент все работает хорошо, и вот скриншот:

Но я не хочу, чтобы мое расширение хром быть зависит от сети, так что я решил скачать boostrap с помощью:

npm install boostrap которые загрузили boostrap 3. Я также решил использовать webpack для загрузки boostrap.min.css.

module: { 
    loaders: [{ 
     test: /\.js$/, 
     loader: 'babel', 
     exclude: /node_modules/, 
     query: { 
     presets: ['react-hmre'] 
     } 
    }, { 
     test: /\.css$/, 
     loaders: [ 
     'style', 
     'css?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 
     'postcss' 
     ] 
    }, 
    {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'}, 
    {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'}, 
    {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'}, 
    {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}] 
    }

Я не изменил CSS загрузчик (который исходит от шаблонного), но я добавил загрузчик для веб-шрифтов и SVG.

Наконец, я включил boostrap.min.css в яваскрипта точки входа: import 'bootstrap/dist/css/bootstrap.min.css';

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

Я думаю, что часть loadrap загружен (потому что ссылка во второй версии выглядит так же, как ссылки в первой версии. Но, очевидно, другие компоненты не загружены.

I al поэтому используйте реакционноспособный реактор.

Благодаря

источник

2016-08-17 Epitouille

Сразу после написания этого вопроса, я думаю, я нашел: '' 'css? Modules''', так как официальный сайт модуля css: CSS-модуль - это файл CSS, в котором все имена классов и имена анимации локально по умолчанию – Epitouille

Моя идея в комментариях правильно, CSS? Модуль локально нагрузки boostrap. Я изменил импорт с:

import '!style!css!bootstrap/dist/css/bootstrap.min.css';

и работает

источник

2016-08-17 19:42:15 Epitouille

npm install bootstrap ;

И:

Adjust Css погрузчик следующим образом:

 { 
      test: /\.css$/, 
      loaders: ['style', 'css'], 
     }

И, импорт начальной загрузки:

import Bootstrap from 'bootstrap/dist/css/bootstrap.css';

источник

2016-09-10 00:17:39

Для WEBPACK 2, (т.е. после того, как вся необходимая зависимость устанавливается), вы можете включать в себя самозагрузки следующим образом: -

Добавить CSS погрузчики в webpack.config.js

{ 
    test: /\.css$/, 
    use: [ 
     { 
      loader: 'style-loader' 
     }, 
     { 
      loader: 'css-loader', 
      options: { 
       importLoaders: 1 
      } 
     } 
    ] 
}

Затем, импорт начальной загрузки в точке сценария входа (т.е. index.js или app.js, index.JS в моем проекте)
```
import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css';
```

нужны детали !!!More details here

источник

2017-03-20 08:22:10

Включите загрузку с помощью webpack

ответ

Смежные вопросы