Webpack bootstrap ExtractTextPlugin SCSS - 模块解析失败意外的字符'@'

Question

我试图从bootstrap 4.0.0 beta scss使用webpack输出一个css文件。我已经成功地使用内联样式注入来处理scss：https://getbootstrap.com/docs/4.0/getting-started/webpack/。有关于将样式注入到文档头部的问题。

，这里是我的package.json：

{ 
    "name": "testproject", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "build": "webpack" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "@types/knockout": "^3.4.46", 
    "bootstrap": "^4.0.0-beta", 
    "css-loader": "^0.28.7", 
    "extract-text-webpack-plugin": "^3.0.1", 
    "html-webpack-plugin": "^2.30.1", 
    "jquery": "^3.2.1", 
    "knockout": "^3.4.2", 
    "node-sass": "^4.5.3", 
    "popper.js": "^1.12.5", 
    "postcss-loader": "^2.0.8", 
    "precss": "^2.0.0", 
    "sass-loader": "^6.0.6", 
    "style-loader": "^0.19.0", 
    "ts-loader": "^3.0.2", 
    "typescript": "^2.5.3", 
    "url-loader": "^0.6.2", 
    "webpack": "^3.7.1", 
    "webpack-notifier": "^1.5.0" 
    }, 
    "-vs-binding": { 
    "BeforeBuild": [ 
     "build" 
    ] 
    }, 
    "dependencies": {} 
} 

和我webpack.config.js（更新）：

var path = require('path'); 
var webpack = require('webpack'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

const extractScss = new ExtractTextPlugin({ 
    filename: 'dist/[name].[hash].css', 
    allChunks: true, 
}); 

module.exports = { 
    entry: { 
     site: [ 
      './wwwroot/js/site.js', 
      './Script/testkoviewmodel.ts'], 
    }, 
    output: { 
     publicPath: "/dist/", 
     path: path.join(__dirname, '/wwwroot/dist/'), 
     filename: '[name].[hash].build.js', 
    }, 
    plugins: [ 
     extractScss, 
     new webpack.optimize.UglifyJsPlugin({ 
      minimize: true, 
      compress: { 
       warnings: false 
      }, 
     }), 
     new webpack.ProvidePlugin({ 
      $: 'jquery', 
      jQuery: 'jquery', 
      'window.jQuery': 'jquery', 
      Popper: ['popper.js', 'default'], 
     }), 
     new HtmlWebpackPlugin({ 
      inject: false, 
      template: 'Views/Shared/_LayoutTemplate.cshtml', 
      filename: '../../Views/Shared/_Layout.cshtml', 
     }),   
    ], 
    devtool: 'source-map', 
    module: { 
     rules: [ 
      { 
       test: /\.tsx?$/, 
       loader: 'ts-loader', 
       exclude: /node_modules/, 
      }, 
      { test: /\.css$/, loader: "style-loader!css-loader" }, 
      { 
       test: /\.scss$/, 
       use: extractScss.extract({ 
        fallback: 'style-loader', 
        use: ['css-loader', 'sass-loader'] 
       }), 
       exclude: /node_modules/, 
      }, 
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" }, 
      { test: /\.(woff|woff2)$/, loader: "url?prefix=font/&limit=5000" }, 
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" }, 
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }, 
     ] 
    }, 
    resolve: { 
     extensions: ['.ts', '.tsx', '.js', '.scss'], 
    } 
}; 

我试图修改的所有方式到的WebPack配置按多很多人都有相同或相关的问题。到目前为止，我显然不成功。

**编辑！重要的：整个问题是排除属性应该被引用，因为它们不是正则表达式，而是在这种情况下的字符串。感谢BudHead！

Answer 1

假设您正在导入引导4像这样在你进入JS：

import 'bootstrap/scss/bootstrap.scss'; 

...尝试以下插件设置：

const extractScss = new ExtractTextPlugin({ 
    filename: 'assets/css/[name].[contenthash].css', 
    allChunks: true 
}); 

...上面添加到您的plugins数组：

plugins: [extractScss] 

...然后在你的规则：

{ 
    test: /\.scss$/, 
    use: extractScss.extract({ 
    fallback: 'style-loader', 
    //resolve-url-loader may be chained before sass-loader if necessary 
    use: ['css-loader', 'sass-loader'] 
    }) 
} 

---

所以来构建你的ExtracTextPlugin是非常重要的，在这里我有我在你的规则配置设置为

const extractScss = new ExtractTextPlugin(...) 

这样，以后你路过同一个对象。在上面的代码中，您使用的是ExtractTextPlugin的导入实例，而不是您在插件数组中创建的新实例（没有设置选项）。

你可能不得不调整在插件选项的文件名，矿山设置去像资产/ CSS/main.awef32fq23faf23aasdf.css