如何添加真棒上angular2的WebPack

我用angular2的WebPack，引導4，並希望包括真棒字體如何添加真棒上angular2的WebPack

'的package.json'：

「字體真棒」：「^ 4.6.3」，「字體真棒裝載機」：「1.0.0」，
「真棒-打字稿裝載機」：「^ 2.2.1」，

'webpack.common.js'

module: { 
      postcss: [autoprefixer], 
      preLoaders: [ 
      { 
       test: /\.ts$/, 
       loader: 'string-replace-loader', 
       query: { 
       search: '(System|SystemJS)(.*[\\n\\r]\\s*\\.|\\.)import\\((.+)\\)', 
       replace: '$1.import($3).then(mod => (mod.__esModule && mod.default) ? mod.default : mod)', 
       flags: 'g' 
       }, 
       include: [helpers.root('src')] 
      }, 

      ], 
      loaders: [ 
      { 
       test: /\.ts$/, 
       loaders: [ 
       '@angularclass/hmr-loader?pretty=' + !isProd + '&prod=' + isProd, 
       'awesome-typescript-loader', 
       'angular2-template-loader' 
       ], 
       exclude: [/\.(spec|e2e)\.ts$/] 
      }, 


      { 
       test: /\.json$/, 
       loader: 'json-loader' 
      }, 
      { test: /\.css$/, loader: 'raw' }, 

      { 
       test: /\.html$/, 
       loader: 'raw-loader', 
      }, 

      { test: /\.(jpg|png|gif)$/, loader: 'file' }, 
      { test: /\.scss$/, loaders: ['raw', 'postcss?sourceMap', 'sass?sourceMap'] }, 
      { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url?limit=10000' }, 

      { test: /bootstrap\/dist\/js\//, loader: 'imports?jQuery=jquery' } 
      ], 

      postLoaders: [ 
      { 
       test: /\.js$/, 
       loader: 'string-replace-loader', 
       query: { 
       search: 'var sourceMappingUrl = extractSourceMappingUrl\\(cssText\\);', 
       replace: 'var sourceMappingUrl = "";', 
       flags: 'g' 
       } 
      } 
      ]

'vendor.js'

import 'bootstrap-loader'; 
import 'font-awesome-loader';

當我在home.component.ts

<button type="submit" name="search" > 
     <i class="fa fa-search"></i> 
    </button>

使用有en err：

./~/css-loader!./~/raw-loader!./~/font-awesome/css/font-awesome.css? 
    Module build failed: Unknown word (1:1) 

    @ ./~/style-loader!./~/css-loader!./~/font-awesome/css/font-awesome.css? 
4:14-102 
    @ ./src/vendor.browser.ts 
    @ multi vendor

來源

2016-09-17 Kery Hu

嘗試使用此

{ 
test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' }, 
      { 
      test: /\.(woff|woff2|eot|ttf)(\?.*$|$)/, 
      loader: 'url-loader?importLoaders=1&limit=100000' 
      }

進口引導使用此行

import 'bootstrap/dist/css/bootstrap.css'

和導入字體的使用這條線在你的CSS文件

@import url(https://fonts.googleapis.com/css?family=Oswald:400,700); 
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i);

這些都爲我工作希望對你有所幫助

來源

2016-09-17 05:27:36 Sujithrao

'{ test：/\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/， loader：'url-loader？importLoaders = 1＆limit = 100000' }，'但錯誤是還在那兒。 –

如何添加真棒上angular2的WebPack

回答

相關問題