Webpack scss 및 CSS 모듈 반응 - 예기치 않은 토큰 문자열

Question

scss (mixins, variables 등) 및 css 모듈을 사용하는 반응으로 프로젝트를 설정하려고합니다.

그러나 스타일 로더, css-loader, postcss-loader, sass-loader, sass-resources-loader, import-glob-loader를 사용하여 webpack을 설정할 때. 나는 다음과 같은 오류 얻을 :

Worker error Error: Unexpected token string «./node_modules/css- 
loader/index.js?"importLoaders":1,"modules":true,"localIdentName" 
:"[name]__[local]___[hash:base64:5]"!./node_modules/postcss-loade 
r/lib/index.js?!./node_modules/sass-loader/lib/loader.js!./node_m 
odules/sass-resources-loader/lib/loader.js?"resources":["/Users/* 
***/Documents/Repos/project/src/scss/*.scss"]!./node_modules/impo 
rt-glob-loader/index.js!./src/App/App.scss», expected punc «,»  
    at objectToError (/Users/****/Documents/Repos/project/node_mo 
dules/workerpool/lib/WorkerHandler.js:63:14)      
    at ChildProcess.<anonymous> (/Users/****/Documents/Repos/ui- 
kit/node_modules/workerpool/lib/WorkerHandler.js:146:32)   
    at emitTwo (events.js:125:13)         
    at ChildProcess.emit (events.js:213:7)       
    at emit (internal/child_process.js:774:12)      
    at _combinedTickCallback (internal/process/next_tick.js:141:1 
1)                 
    at process._tickCallback (internal/process/next_tick.js:180:9 
) filename: '0', line: 18, col: 936, pos: 2292  

웹팩 SCSS

const webpack = require('webpack'); 
const path = require('path'); 

const DashboardPlugin = require('webpack-dashboard/plugin'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const autoprefixer = require('autoprefixer'); 

const nodeEnv = process.env.NODE_ENV || 'development'; 
const isProduction = nodeEnv === 'production'; 

const jsSrcPath = path.join(__dirname, './'); 
const publicPath = path.join(__dirname, './public'); 
const imgPath = path.join(__dirname, './src/assets/img'); 
const srcPath = path.join(__dirname, './src'); 

/* Common plugins */ 

const plugins = [ 
    new webpack.DefinePlugin({ 
     'process.env': { 
      NODE_ENV: JSON.stringify(nodeEnv) 
     } 
    }), 
    new webpack.NamedModulesPlugin(), 
    new HtmlWebpackPlugin({ 
     template: path.join(publicPath, 'index.html'), 
     path: publicPath, 
     filename: 'index.html', 
    }), 
    new webpack.NoEmitOnErrorsPlugin(), 
]; 

/* Common Rules */ 
const rules = [{ 
     test: /\.(js|jsx)$/, 
     include: path.join(__dirname, 'src'), 
     exclude: path.resolve(__dirname, "node_modules"), 
     loader: "babel-loader" 
    }, 
    { 
     test: /\.scss$/, 
     use: [ 
      'style-loader', 
      { 
       loader: 'css-loader', 
       options: { 
        importLoaders: 1, 
        modules: true, 
        localIdentName: "[name]__[local]___[hash:base64:5]" 
       } 
      }, 
      { 
       loader: 'postcss-loader', 
       options: { 
        plugins:() => [autoprefixer] 
       } 
      }, 
      'sass-loader', 
      { 
       loader: 'sass-resources-loader', 
       options: { 
        resources: [ 
         path.resolve(__dirname, "./src/scss/*.scss") 
        ] 
       } 
      }, 
      'import-glob-loader' 
     ] 
    }, 
    { 
     test: /\.woff$/, 
     loader: "url-loader?limit=10000&mimetype=application/font-woff&name=[path][name].[ext]" 
    }, { 
     test: /\.woff2$/, 
     loader: "url-loader?limit=10000&mimetype=application/font-woff2&name=[path][name].[ext]" 
    }, 
    { 
     test: /\.(png|gif|jpg|svg)$/, 
     include: imgPath, 
     use: 'url-loader?limit=20480&name=assets/[name]-[hash].[ext]', 
    } 
]; 

if (isProduction) { 
    // Production plugins 
    plugins.push(
     new webpack.LoaderOptionsPlugin({ 
      minimize: true, 
      debug: false, 
     }), 
     new webpack.optimize.UglifyJsPlugin({ 
      compress: { 
       warnings: false, 
       screw_ie8: true, 
       conditionals: true, 
       unused: true, 
       comparisons: true, 
       sequences: true, 
       dead_code: true, 
       evaluate: true, 
       if_return: true, 
       join_vars: true, 
      }, 
      output: { 
       comments: false, 
      }, 
     }), 
    ); 

    // Production rules 

} else { 
    // Development plugins 
    plugins.push(
     new webpack.HotModuleReplacementPlugin(), 
     new DashboardPlugin() 
    ); 
    // Development rules 

} 

module.exports = { 
    devtool: isProduction ? 'eval' : 'source-map', 
    context: jsSrcPath, 
    entry: [ 
     'babel-polyfill', 
     './src/index.js' 
    ], 
    output: { 
     path: publicPath, 
     publicPath: '/', 
     filename: 'app-[hash].js', 
    }, 
    module: { 
     rules, 
    }, 
    resolve: { 
     extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'], 
     modules: [ 
      path.resolve(__dirname, "node_modules"), 
      jsSrcPath 
     ] 
    }, 
    plugins, 
    devServer: { 
     contentBase: isProduction ? './public' : './src', 
     historyApiFallback: true, 
     port: 3000, 
     compress: isProduction, 
     inline: !isProduction, 
     hot: !isProduction, 
     host: '0.0.0.0', 
     stats: { 
      assets: true, 
      children: false, 
      chunks: false, 
      hash: false, 
      modules: false, 
      publicPath: false, 
      timings: true, 
      version: false, 
      warnings: true, 
      colors: { 
       green: '\u001b[32m' 
      } 
     } 
    } 
}; 

하는 반응 :

import React, { Component } from 'react' 
import PropTypes from 'prop-types' 
import { bindActionCreators } from 'redux' 
import { connect } from 'react-redux' 

import styles from './App.scss'; 

class App extends Component { 
    render() { 
    return (
     <div> 
     <h1 className={styles.main}>Hello World</h1> 
     </div> 
    ) 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
     app: state.app 
    }; 
}; 

export default connect(mapStateToProps, null)(App) 

App.scss이 문제가

.main { color: red; } 

사람은 다른 파일 전에?

Answer 1

Full for reference

module: { 
    rules: [ 
     { 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loader: 'babel-loader', 
     }, 

     { 
      test: /\.scss$/, 
      loader: ExtractPlugin.extract(['css-loader', 'sass-loader']), 
     }, 
     { 
      test: /\.css$/, 
      exclude: [/\.global\./, /node_modules/], 
      loader: ExtractPlugin.extract(
       { 
        fallback: 'style-loader', 
        use: [ 
         { 
          loader: 'css-loader', 
          options: { 
           importLoaders: 1, 
           modules: true, 
           autoprefixer: true, 
           minimize: true, 
           localIdentName: '[name]__[local]___[hash:base64:5]' 
          } 
         } 
        ] 
       }) 
     }, 

Answer 2

당신의 exclude: path.resolve(__dirname, "node_modules"),가 비난 할 것으로 보인다. 로더에서 그걸 제거해 볼 수 있니?

더 많은 통찰력을주기 위해 : 오류는 node_modules/css-loader/index.js에 대해보고하고 있습니다. 자바 스크립트 파일. js|jsx 규칙 (예 : babel-loader)에서 node_module은 완전히 제외됩니다. 이것이 문제의 원인입니다.

UPDATE : 문제의 원인 코드 아직

Answer 3

이 작동하지만 난 추출물 - 텍스트 플러그인을 추가하고 내 문제를 해결 이유를 100 % 확실하지 않다. 나는 제외 사용하지 않는