webpack을 사용하여 부트 스트랩 포함

크롬 확장 기능을 개발 중입니다. 나는 UI를 위해 부스트랩 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')

다음은 내가 부스트랩을 사용하는 방법입니다.
localhost : 3000은 webpack 웹 서버로 만든 서버입니다. 모든 것이 여기에 잘 작동이 시점에서

는 스크린 샷입니다 :

하지만 내 크롬 확장 네트워크 의존하지 않는, 그래서 사용하여 부트 스트랩 다운로드하기로 결정

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';

, 그것은처럼 내 확장 보는 방법 boostrap이로드됩니다 (두 번째 버전의 링크가 첫 번째 버전의 링크와 같기 때문에 표시되지만, 분명히 다른 구성 요소는로드되지 않습니다).

그러므로 반응 부스트랩을 사용하십시오.

감사

출처

2016-08-17 Epitouille

이 질문을 쓰자마자 나는 CSS 모듈의 공식 웹 사이트 : CSS 모듈은 모든 클래스 이름과 애니메이션 이름이있는 CSS 파일이라는 것을 발견했다. 기본적으로 지역적으로 범위 지정 – Epitouille

코멘트에 내 생각이 옳다, CSS는? 모듈 로컬 부하 부트 스트랩. 나는 함께 가져 오기를 변경 :

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

그것은

출처

2016-08-17 19:42:15 Epitouille

npm install bootstrap ;

그리고 작동 : 다음과 같은

CSS 로더를 조정을 :

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

그리고, 수입 부트 스트랩 :

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

출처

2016-09-10 00:17:39

웹 페이지 2 (즉, 필요한 모든 의존성)를 설치 한 후 다음과 같이 부트 스트랩을 포함 할 수 있습니다 : - webpack.config.js에

추가 CSS 로더

{ 
    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을 사용하여 부트 스트랩 포함

답변

관련 문제