Question

我在使用角度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？
然后，尝试我的配置（它为我工作）

注意：Bootstrap 4需要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"
        }),
]

在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

1 个答案: