scssを使用してprimengテーマを読み込んでいます

Question

primengテーマをscss経由でロードしようとすると問題が発生しています（最終的にカスタマイズできます）。私はこれを行うことができましたブートストラップしかしprimengが機能していません。そこのWebPACKにエラーが現在ませんし、その出力ログが放出されるフォントファイルを報告しますが、スタイルがコントロールに適用されていない

私の最初の問題は、オメガ\フォント\ primeng \リソースにあるフォント\テーマをロードしました。私は解決-URL-ローダー、SASS-ローダーの中sourceMapパラメータだけでなく、のurl-ローダーを使用して、その過ぎだとファイルローダー （私がオンラインで見つけたいくつかの解決策によると）フォントファイルを放出する。私は/.(png|jpg|jpeg|gif|svg)$/の除外をテストして、フォントディレクトリをスキップしていることを確認します。ここで

は、私がこれまで持っているものです。

styles.scss

//bootstrap 
@import "~bootstrap/scss/bootstrap"; 

//primeng 
@import "~primeng/resources/themes/omega/theme.scss"; 
@import "~primeng/resources/themes/_theme.scss"; 

boot.browser.ts WebPACKのため（エントリー・ポイントのパスが正当な理由でありますブートストラップインポートが機能しています）

... 
import './assets/scss/styles.scss'; 
... 

@import "~primeng/resources/themes/omega/theme.scss";はすでに _theme.scssをロードするので、あなたはオメガの外_theme.scssをロードしているので、あなたが問題を取得している場合、私はわからないように見えます

webpack.config.js

const path = require('path'); 
const webpack = require('webpack'); 
const merge = require('webpack-merge'); 
const AotPlugin = require('@ngtools/webpack').AotPlugin; 
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin; 

module.exports = (env) => { 
    // Configuration in common to both client-side and server-side bundles 
    const isDevBuild = !(env && env.prod); 
    const sharedConfig = { 
     stats: { modules: false }, 
     context: __dirname, 
     resolve: { extensions: ['.js', '.ts'] }, 
     output: { 
      filename: '[name].js', 
      publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix 
     }, 
     module: { 
      rules: [ 
       { test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' }, 
       { test: /\.html$/, use: 'html-loader?minimize=false' }, 
       { test: /\.css$/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize'] }, 
       { test: /\.(png|jpg|jpeg|gif|svg)$/, exclude: [/fonts/], use: 'url-loader?limit=25000' }, 
       { 
        test: /\.(scss)$/, 
        use: [{ 
         loader: 'style-loader', // inject CSS to page 
        }, { 
         loader: 'css-loader', // translates CSS into CommonJS modules 
        }, { 
         loader: 'postcss-loader', // Run post css actions 
         options: { 
          plugins: function() { // post css plugins, can be exported to postcss.config.js 
           return [ 
            require('precss'), 
            require('autoprefixer') 
           ]; 
          } 
         } 
        }, { 
         loader: 'resolve-url-loader', //handles url pathing in scss 
        }, { 
         loader: 'sass-loader?sourceMap' // compiles SASS to CSS 
        }] 
       }, 
       { 
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
        use: 'url-loader?limit=10000&mimetype=application/font-woff' 
       }, 
       { 
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
        use: 'file-loader' 
       } 
      ] 
     }, 
     plugins: [new CheckerPlugin()] 
    }; 

    // Configuration for client-side bundle suitable for running in browsers 
    const clientBundleOutputDir = './wwwroot/dist'; 
    const clientBundleConfig = merge(sharedConfig, { 
     entry: { 'main-client': './ClientApp/boot.browser.ts' }, 
     output: { path: path.join(__dirname, clientBundleOutputDir) }, 
     plugins: [ 
      new webpack.DllReferencePlugin({ 
       context: __dirname, 
       manifest: require('./wwwroot/dist/vendor-manifest.json') 
      }), 
      new webpack.ProvidePlugin({ 
       $: 'jquery', 
       jQuery: 'jquery', 
       'window.jQuery': 'jquery', 
       Popper: ['popper.js', 'default'] 
       // In case you imported plugins individually, you must also require them here: 
       //Util: "exports-loader?Util!bootstrap/js/dist/util", 
       //Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown" 
      }) 
     ].concat(isDevBuild ? [ 
      // Plugins that apply in development builds only 
      new webpack.SourceMapDevToolPlugin({ 
       filename: '[file].map', // Remove this line if you prefer inline source maps 
       moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk 
      }) 
     ] : [ 
       // Plugins that apply in production builds only 
       new webpack.optimize.UglifyJsPlugin(), 
       new AotPlugin({ 
        tsConfigPath: './tsconfig.json', 
        entryModule: path.join(__dirname, 'ClientApp/app/app-browser.module#AppModule'), 
        exclude: ['./**/*.server.ts'] 
       }) 
      ]) 
    }); 

    // Configuration for server-side (prerendering) bundle suitable for running in Node 
    const serverBundleConfig = merge(sharedConfig, { 
     resolve: { mainFields: ['main'] }, 
     entry: { 'main-server': './ClientApp/boot.server.ts' }, 
     plugins: [ 
      new webpack.DllReferencePlugin({ 
       context: __dirname, 
       manifest: require('./ClientApp/dist/vendor-manifest.json'), 
       sourceType: 'commonjs2', 
       name: './vendor' 
      }) 
     ].concat(isDevBuild ? [] : [ 
      // Plugins that apply in production builds only 
      new AotPlugin({ 
       tsConfigPath: './tsconfig.json', 
       entryModule: path.join(__dirname, 'ClientApp/app/app-server.module#AppModule'), 
       exclude: ['./**/*.browser.ts'] 
      }) 
     ]), 
     output: { 
      libraryTarget: 'commonjs', 
      path: path.join(__dirname, './ClientApp/dist') 
     }, 
     target: 'node', 
     devtool: 'inline-source-map' 
    }); 

    return [clientBundleConfig, serverBundleConfig]; 
}; 

Answer 1

theme.scss後に、これだけ試してみてください。

//bootstrap 
@import "~bootstrap/scss/bootstrap"; 

//primeng 
@import "~primeng/resources/themes/omega/theme.scss"; 

を時々私はprimengスタイルの問題を持っていた（または私は別のパス・セットアップを使用したかったので）とき、私はtheme.scss（またはレイアウトをロードします。あなたがいるならscssテンプレートを使用）を"styles": []オプションの代わりにangular-cli.jsonの内側に追加します。あなたもそれを試してみるかもしれません。

Answer 2

問題は、私はでprimeng /リソース/ primeng.csswebpack.config.vendor.jsを含めるために必要なことであることが判明しました。私はprimeng/resources/themes/omega/theme.cssと一緒に削除しました。スタイルはSCSSファイルからコンパイルされるだろうが、primeng.cssはまだ明らかに、必要とされているので、 theme.css を削除するには正しかったです。

また、フォントに使用されたwebpack.config.jsの最後の2つのテストを削除できました。 Webpackはこれらの2つのテストがなくても間違いなく間違いがありましたが、distフォルダを削除して再構築しても、今はそうではありません。なぜ今はエラーがないのか分かりません。うまくいけばうれしいです。

編集：ああ、フォントバンドルはオメガテーマにのみ必要です。そのテーマが使用されている場合はそれらが必要になります。