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