角度2 - ブートストラップでscssを使用する方法4 webpackを使用したテストで

Question

角度2.2.1でテスト中にscssファイルを使用する際に問題があります。私のコンポーネントはうまくコンパイルされていますが、テストでは機能しません。私は角度2の始動種子を使用しています。元のコードはコード内にcssを使用しています。共通のWebPACKテスト/で、私はWebPACKのこの設定を追加した：

{ 
    test: /\.scss$/, 
    loaders: ['raw-loader', 'sass-loader'] 
} 

マイ部品コード：

@Component({ 
    selector: 'app', 
    encapsulation: ViewEncapsulation.None, 
    styleUrls: [ 
    './scss/application.scss' 
    ] 
}) 

私が得た第一のエラーメッセージは次のとおりです。

Failed to load assets/scss/application.scss 
     invoke@spec-bundle.js:6807:35 
     run@spec-bundle.js:6700:51 

私は疑いますspec-bundle.jsファイルのエラー、ブートストラップ4 scss、アプリケーションを含まない

2番目のエラーRコード私は、後に自分のコードにブートストラップ4 SCSSコピーされました：私はコンパイルして実行することができますので、私のSCSSファイルは、細かいかなり確信している

color: $text-color; 
     ^
     Undefined variable: "$text-color". 

を。私はこの時点でどのようにこの問題を解決する手がかりがありません。 An

Answer 1

• 最初に、ソースルートフォルダに.bootstraprcがありましたか？
• その後、注

（それは私のために働いています）私の設定を試してください：4 vendor.browser.tsでjQueryとTether

/* webpack.common.js */ 
... 
resolve: { 
    extensions: ['.ts', '.js', '.json', '.css', '.scss'], 
    modules: [helpers.root('src'), helpers.root('node_modules')], 
}, 
module: { 
    rules: [ 
     ... 
     { 
     test: /\.scss$/, 
     loaders: ['to-string-loader', 'css-loader', 'sass-loader'] 
     }, 
     { 
     test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: "url-loader?limit=10000&mimetype=application/font-woff" }, 
     { 
     test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: "file-loader" 
     }, 
// For bootstrap 4 
     { 
     test: /bootstrap\/dist\/js\/umd\//, 
     loader: 'imports?jQuery=jquery' 
     } 
    ] 
}, 
plugins: [ 
    ... 
    new webpack.ProvidePlugin({ 
      $: "jquery", 
      jQuery: "jquery", 
      "window.jQuery": "jquery", 
      Tether: "tether", 
      "window.Tether": "tether", 
      Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip", 
      Alert: "exports-loader?Alert!bootstrap/js/dist/alert", 
      Button: "exports-loader?Button!bootstrap/js/dist/button", 
      Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel", 
      Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse", 
      Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown", 
      Modal: "exports-loader?Modal!bootstrap/js/dist/modal", 
      Popover: "exports-loader?Popover!bootstrap/js/dist/popover", 
      Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy", 
      Tab: "exports-loader?Tab!bootstrap/js/dist/tab", 
      Util: "exports-loader?Util!bootstrap/js/dist/util" 
     }), 
] 

を必要とブートストラップ、jQueryとbootstrap-loader

をインポートしてください。

import 'bootstrap-loader'; 
import 'jquery'; 

必要な場合はpackakge.json

"dependencies": { 
    ... 
    "bootstrap": "^4.0.0-alpha.5", 
    "bootstrap-loader": "2.0.0-beta.16", 
    "jquery": "^2.2.4" 
    ... 
}, 
"devDependencies": { 
    ... 
    "@types/jquery": "^2.0.34", 
    "css-loader": "^0.26.0", 
    "file-loader": "^0.9.0", 
    "node-sass": "3.13.0", 
    "raw-loader": "0.5.1", 
    "resolve-url": "^0.2.1", 
    "resolve-url-loader": "^1.6.0", 
    "sass-loader": "^4.0.2", 
    "string-replace-loader": "1.0.5", 
    "style-loader": "^0.13.1", 
    "tether": "^1.3.8", 
    "to-string-loader": "^1.1.4", 
    ... 
}