오류 : "extract-text-webpack-plugin"로더가 해당 플러그인없이 사용 된 경우

Question

ERROR in ./client/styles/main.scss 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 at Object.pitch (/Users/leongaban/projects/go/src/github.com/pizzahutdigital/mythor/node_modules/extract-text-webpack-plugin/dist/loader.js:53:11) @ ./client/index.js 25:0-29 @ multi ./client

왜이 오류가 발생하는지 잘 모름. 그러나 main.scss 파일이로드되고 있지만 SASS 변수 이름 또는 mixins 작동하지 않습니다.

주하는 index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 

// Styles 
import './styles/main.scss'; 

는

가

import webpack from 'webpack'; 
import path from 'path'; 
import HtmlWebpackPlugin from 'html-webpack-plugin'; 
import ExtractTextPlugin from 'extract-text-webpack-plugin'; 

const dist = path.resolve(__dirname, 'dist'); 
const app = path.resolve(__dirname, 'client'); 

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: path.join(__dirname, '/client/index.html'), 
    inject: 'body' 
}); 

const PATHS = { 
    app, 
    build: dist 
}; 

const LAUNCH_COMMAND = process.env.npm_lifecycle_event; 

const isProduction = LAUNCH_COMMAND === 'production'; 
process.env.BABEL_ENV = LAUNCH_COMMAND; 

const productionPlugin = new webpack.DefinePlugin({ 
    'process.env': { 
    NODE_ENV: JSON.stringify('production') 
    } 
}); 

const base = { 
    entry: [ 
    PATHS.app 
    ], 
    output: { 
    path: PATHS.build, 
    filename: 'bundle.js' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     use: ['babel-loader'] 
     }, 
     { 
     test: /\.scss$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: ['css-loader', 'sass-loader'], 
      publicPath: dist 
     }) 
     } 
    ], 
    loaders: [ 
     { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, 
     { test: /\.css$/, loader: 'style-loader!css-loader' }, 
     { 
     test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/, 
     loader: 'url-loader?limit=100000' 
     } 
    ] 
    }, 
    resolve: { 
    modules: ['node_modules', path.resolve(__dirname, '/client')] 
    } 
}; 

const developmentConfig = { 
    devtool: 'cheap-module-inline-source-map', 
    plugins: [HtmlWebpackPluginConfig] 
}; 

const productionConfig = { 
    devtool: 'cheap-module-source-map', 
    plugins: [HtmlWebpackPluginConfig, productionPlugin] 
}; 

console.log('LAUNCH_COMMAND npm run', LAUNCH_COMMAND); 

export default Object.assign({}, base, 
    isProduction === true ? productionConfig : developmentConfig 
); 

package.json

당신의 웹팩 설정 플러그인 배열에서

"dependencies": { 
    "axios": "^0.16.2", 
    "babel-runtime": "^6.23.0", 
    "chalk": "^2.1.0", 
    "eslint": "^4.3.0", 
    "eslint-config-airbnb": "^15.1.0", 
    "eslint-plugin-import": "^2.7.0", 
    "eslint-plugin-jsx-a11y": "^5.1.1", 
    "eslint-plugin-react": "^7.1.0", 
    "firebase": "^4.3.0", 
    "material-ui": "^0.19.2", 
    "prop-types": "^15.5.10", 
    "ramda": "^0.24.1", 
    "react": "^15.6.1", 
    "react-dom": "^15.6.1", 
    "react-hot-loader": "^1.3.1", 
    "react-redux": "^5.0.5", 
    "react-router": "^4.1.2", 
    "react-router-dom": "^4.1.2", 
    "redux": "^3.7.2", 
    "redux-thunk": "^2.2.0", 
    "scss-lint": "^0.0.0" 
}, 
"devDependencies": { 
    "babel-core": "^6.25.0", 
    "babel-loader": "^7.1.1", 
    "babel-plugin-transform-async-to-generator": "^6.24.1", 
    "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1", 
    "babel-plugin-transform-runtime": "^6.23.0", 
    "babel-polyfill": "^6.23.0", 
    "babel-preset-env": "^1.6.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "babel-preset-react-hmre": "^1.1.1", 
    "babel-preset-stage-0": "^6.24.1", 
    "copy-webpack-plugin": "^4.0.1", 
    "css-loader": "^0.28.4", 
    "enzyme": "^2.9.1", 
    "enzyme-to-json": "^1.5.1", 
    "extract-text-webpack-plugin": "^3.0.0", 
    "html-webpack-plugin": "^2.29.0", 
    "jest": "^20.0.4", 
    "node-sass": "^4.5.3", 
    "react-test-renderer": "^15.6.1", 
    "redux-mock-store": "^1.2.3", 
    "sass-loader": "^6.0.6", 
    "style-loader": "^0.18.2", 
    "url-loader": "^0.5.9", 
    "webpack": "^3.3.0", 
    "webpack-dev-server": "^2.5.1" 
} 

Answer 1

, 너무 ExtractTextPlugin를 추가 webpack.config.babel.js 이 같은

const developmentConfig = { 
    devtool: 'cheap-module-inline-source-map', 
    plugins: [HtmlWebpackPluginConfig, new ExtractTextPlugin("main.css")] 
}; 

const productionConfig = { 
    devtool: 'cheap-module-source-map', 
    plugins: [HtmlWebpackPluginConfig, new ExtractTextPlugin("main.css"), productionPlugin] 
}; 

모든 CSS 스타일을 포함하는 별도의 main.css 파일이 생성됩니다.