Webpack 3 : sass-loader를 사용하면 ExtractTextPlugin이 작동하지 않습니다.

Question

webpack에서 sass-loader를 사용하려고했는데이 지침을 따르십시오. ->https://github.com/webpack-contrib/extract-text-webpack-plugin#extracting-sass-or-less하지만 작동하지 않습니다.

아무도 도와 줄 수 있습니까?

저장소

https://github.com/gpincheiraa/boolean-html-js-exercises/tree/dev

오류

ERROR in Error: Child compilation failed: 
    Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example 

    - Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example 

종속성

node v6.11.1 
npm 5.3.0 

├── babel-cli@6.26.0 
├── babel-loader@7.1.2 
├── babel-plugin-transform-class-properties@6.24.1 
├── babel-polyfill@6.26.0 
├── babel-preset-es2015@6.24.1 
├── babel-preset-stage-3@6.24.1 
├── css-loader@0.28.7 
├── extract-text-webpack-plugin@3.0.0 
├── html-loader@0.5.1 
├── html-webpack-plugin@2.30.1 
├── markdown-loader@2.0.1 
├── node-sass@4.5.3 
├── sass-loader@6.0.6 
├── style-loader@0.18.2 
├── webpack@3.5.6 
└── webpack-dev-server@2.7.1 

,536,913,632 10

webpack.config.js

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

module.exports = { 
    entry: [ 
     "./index.js" 
    ], 
    output: { 
     path: __dirname + "/dist", 
     filename: "index.bundle.js" 
    }, 
    module: { 
     rules: [ 
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }, 
      { test: /\.md$/, loaders: [ "html-loader", "markdown-loader" ] }, 
      { test: /\.scss$/, 
       use: ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        use: ['css-loader', 'sass-loader'] 
       }) 
      } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin('style.css'), 
     new HtmlWebpackPlugin({ 
      template: 'index.html', 
      inject: 'body' 
     }) 
    ], 
    devtool: "eval-source-map", 
    devServer: { 
     filename: "index.bundle.js", 
     contentBase: "./", 
     port: 3000, 
     publicPath: "/", 
     stats: { 
      colors: true 
     } 
    } 
}; 

Answer 1

문제는 commented style code in your index.html에서 온다. index.html은 html-webpack-plugin으로 처리되며 어떤 이유로 든 여전히 요구 통화 (line 9 및 line 11)를 처리하려고 시도합니다. 그 이유는 사용자 정의 EJS 로더 html-webpack-plugin 일 수 있습니다.

가장 쉬운 해결책은 index.html에서 주석 처리 된 코드를 완전히 제거하는 것입니다.

.scss 파일을 가져 오면 구성한 규칙이 적용됩니다. 그러나 실제로이 과정에서 extract-text-webpack-plugin 인스턴스를 사용할 수없는 것으로 보입니다. 이러한 필수 호출에서 인라인 로더를 사용하고 있지만 구성된 규칙은 계속 적용됩니다. 다른 로더가 적용되지 않도록하려면 접두어 앞에 !을 붙입니다. webpack documentation - Rule.enforce 가입일

:

요청에 ! 붙임 생략 (무시) ​​할 수있는 모든 정상 로더.

요청에 -! 접두사를 붙이면 모든 일반 및 프리 로더를 생략 (무시) ​​할 수 있습니다.

요청에 !! 접두어를 붙이면 모든 일반, 사후 및 프리 로더를 생략 (무시) ​​할 수 있습니다. EJS하지 베어 CSS,이 장소에서 자바 스크립트를 기대하기 때문에

, 당신은 또한 sass-loader 후 css-loader를 사용해야합니다 당신의 HTML에서 제대로 CSS를 사용할 수있게합니다.

<%= require("!css-loader!sass-loader!\./sass/index.scss") %> 

또한 당신의 실제 응용 프로그램 대신 html-webpack-plugin에서 사용하는 템플릿에 index.scss를 가져올 좋을 것이다 다음이 될 것입니다 필요합니다.

Answer 2

Webpack 3 + Sass + React를 사용한 구성이 작동하지 않았기 때문에 여기에 왔습니다.

그러나 제 경우에는 문제가 매우 어리 석습니다.내가 create-react-app 도구를 사용하여 프로젝트를 만들고 그것은 조용한 복잡한/완료 구성으로 webpack.config.dev.js 파일을 설정해야합니다.

문제

내가 exclude 한 후 sass 규칙 를 추가하는 것을이었고, 그것은 명확하게 한 후 모든 로더가 작동하지 않습니다 코멘트 (HAH)에서 말한다.

는 그래서이 지금처럼 보이는 그것은 작동 :

 { 
     test: /\.scss$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: [require.resolve('css-loader'), require.resolve('sass-loader')], 
     }) 
     }, 
     { 
     exclude: [/\.js$/, /\.html$/, /\.json$/], 
     loader: require.resolve('file-loader'), 
     options: { 
      name: 'static/media/[name].[hash:8].[ext]', 
     }, 
     }, 

희망이 미래에 누군가를 도와줍니다.