2017-12-17 11 views
0

Ich versuche, ein Projekt mit reagieren, die eine Kombination aus Scss (Mixins, Variablen, etc) und CSS-Module verwendet.Webpack scss & css Module reagieren - unerwartete Token Zeichenfolge

Allerdings, wenn ich Webpack mit Style-Loader, Css-Loader, Postcss-Loader, Sass-Loader, Sass-Ressourcen-Loader, Import-Glob-Loader einrichten. Ich erhalte eine Fehlermeldung, die folgend ist:

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  

Webpack 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' 
      } 
     } 
    } 
}; 

reagieren:

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; } 

Sonst noch jemand dieses Problem Datei haben Vor?

Antwort

0

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

Es Ihre exclude: path.resolve(__dirname, "node_modules"), erscheint verantwortlich gemacht werden. Können Sie es versuchen, nachdem Sie das von den Ladern entfernt haben?

Um Ihnen mehr Einblick zu geben: der Fehler berichtet etwas über node_modules/css-loader/index.js. Eine Java-Skriptdatei. In Ihrer js|jsx Regel (d. H. babel-loader) schließen Sie node_modules vollständig aus. Das ist die Ursache des Problems.

UPDATE: Problem Ursache Code

+0

ich nicht ausschließen, mit: [/\.global\./,/node_modules /]. Ich habe versucht, node_modules in scss Teil der Webpack-Konfiguration auszuschließen. Immer noch den gleichen Fehler – themaster

+0

@themaster Yikes! Mein Fehler. Die Antwort wurde aktualisiert, um den problematischen Ausschluss und weitere Details widerzuspiegeln. –

0

noch nicht zu 100% sicher, warum dies funktioniert, aber ich hinzugefügt Extrakt-Text-Plugin und es behoben meine Probleme.

{ 
     test: /\.s?css$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: [ 
       { 
        loader: 'css-loader', 
        options: { 
         modules: true, 
         importLoaders: 1, 
         localIdentName: '[name]__[local]___[hash:base64:5]' 
        } 
       }, 
       { 
        loader: 'postcss-loader', 
        options: { 
        plugins:() => [autoprefixer] 
        } 
       }, 
       'sass-loader' 
      ] 
     }) 
    } 

auch new ExtractTextPlugin({ filename: '[name].css' }), zu Plugins hinzufügen

+0

Froh, dass Sie einen Weg gefunden haben. Falls irgendwelche Fragen auftreten, überprüfe meine aktualisierte Antwort. Ich hoffe es hilft. –

Verwandte Themen