Angular 2 - 如何在使用 webpack 进行测试时将 scss 与 bootstrap 4 一起使用

Question

我在 angular 2.2.1 中测试时遇到了使用 scss 文件的问题。我的组件编译正常，但无法用于测试。我正在使用 angular 2 starter seed，原始代码在他们的代码中使用 css。在 webpack test / common 中，我在 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 文件中的错误，我没有包含 bootstrap 4 scss、application

将bootstrap 4 scss复制到我的代码后得到的第二个错误代码：

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

我很确定我的 scss 文件没有问题，因为我可以编译和运行。我现在不知道如何解决这个问题。一个

Answer 1

首先，源代码根文件夹中是否有 .bootstraprc？
然后，试试我的配置（对我有用）

Note: Bootstrap 4 require jQuery and 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"
        }),
]

在vendor.browser.ts中，请导入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",
   ...
}

Angular 2 - 如何在使用 webpack 进行测试时将 scss 与 bootstrap 4 一起使用

Angular 2 - how to use scss with bootstrap 4 in testing using webpack

testing

webpack

bootstrap-4

angular