Webpack 부트 스트랩 ExtractTextPlugin SCSS - 모듈 구문 분석 실패 예기치 않은 문자 '@'

Question

webpack을 사용하여 부트 스트랩 4.0.0 beta scss에서 CSS 파일을 출력하려고합니다. 나는 성공적으로 인라인 스타일 주사로 scss를 처리했다 : https://getbootstrap.com/docs/4.0/getting-started/webpack/. 스타일이 문서의 머리 부분에 삽입되는 것과 관련된 문제가 있습니다. 나는 많은 당으로 웹팩 설정을 수정의 모든 방법을 시도했습니다

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'], 
    } 
}; 

: (업데이트)

{ 
    "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 : 여기

내 package.json의 많은 사람들의 게시물은 모두 동일하거나 관련된 문제가 있습니다. 지금까지 분명히 실패했습니다.

** EDIT! important : 전체 문제는 정규식이 아니라이 경우 문자열이므로 제외 속성은 QUOTED 여야합니다. BudHead에 감사드립니다!

Answer 1

당신이 입력 JS 년과 같이 부트 스트랩 (4)을 가져 오는 가정 : 당신의 플러그인의 배열에 이상을 추가 ...

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

:

import 'bootstrap/scss/bootstrap.scss'; 

... 다음 플러그인 설치를 시도 ... 다음 규칙

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