予期せぬ文字 '@'このファイルタイプを扱うには適切なローダーが必要です

Question

これはwebpackを実行しようとすると次のようになります：エラーは "/ ./v3/app/styles/main.scss モジュールの解析に失敗しました：/Users/vovina/widget-login-react/v3/app/styles/main.scss予期しない文字 '@'（1：0） このファイルタイプを処理するには、適切なローダーが必要な場合があります。

@importを解決できません。これについてのアイデアはありますか？

私のWebPACKの設定は以下の通りです：あなたは（SCSS | CSS）を使用している

const childProcess = require('child_process') 
const CopyWebpackPlugin = require('copy-webpack-plugin') 
const ExtractTextPlugin = require('extract-text-webpack-plugin') 
const trimEnd = require('lodash/trimEnd') 
const webpack = require('webpack') 
const path = require('path') 

const ENV = { 
    NODE_ENV: process.env.NODE_ENV, 
    API: 'https://accounts' + (process.env.NODE_ENV === 'prd' ? '' : '-' 
+ process.env.NODE_ENV), 
    BUILD_VERSION: trimEnd(childProcess.execSync('git rev-list HEAD -- 
count').toString(), '\n'), 
    BUILD_DATE: trimEnd(childProcess.execSync('git log --format="%cd" -n 
1').toString(), '\n'), 
    BUILD_COMMIT_ID: trimEnd(childProcess.execSync('git log --format="%h" 
-n 1').toString(), '\n') 
} 
const prodLikeEnvironment = process.env.NODE_ENV === 'stg' || 
process.env.NODE_ENV === 'prd' 
const CSS_MAPS = !prodLikeEnvironment 
module.exports = { 

    entry: { 
    init: [ 
     './app/init.js' 
    ], 
    login: [ 
     './app/login.js' 
    ], 
    authentication: [ 
     './v3/app/authenticator.js' 
    ], 
    common: [ 
     './app/common.js' 
    ] 
    }, 
    target: 'web', 
    output: { 
    path: path.join(__dirname, 'dist', process.env.NODE_ENV), 
    pathinfo: true, 
    publicPath: '/assets/widgets/login/v2/', 
    filename: '[name].bundle.js', 
    chunkFilename: '[id].bundle.js', 
    libraryTarget: 'umd' 
    }, 
    resolve: { 
    alias: { 
     'react': 'preact-compat', 
     'react-dom': 'preact-compat' 
    }, 
    modules: [ 
     path.resolve('./app'), 
     path.resolve('./node_modules') 
    ] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     loaders: ['babel-loader'], 
     exclude: [/bower_components/, /node_modules/] 
     }, 
     { 
// Transform our own .(scss|css) files with PostCSS and CSS-modules 
     test: /\.(scss|css)$/, 
     include: [path.resolve(__dirname, 'v3/app')], 
     options: { 
      sourceMap: true 
     }, 
     loader: [ 
      `style-loader?singleton`, 
      `css-loader?modules&importLoaders=1&localIdentName= 
[local]${process.env.CSS_MODULES_IDENT || 
'_[hash:base64:5]'}&sourceMap=${CSS_MAPS}`, 
      'postcss-loader', 
      `sass-loader?sourceMap=${CSS_MAPS}` 
     ].join('!') 
     }, 
     { 
     test: /\.(scss|css)$/, 
     exclude: [path.resolve(__dirname, 'v3/app')], 
     options: { 
     sourceMap: true 
     }, 
     loader: [ 
      `style-loader?singleton`, 
      `css-loader?sourceMap=${CSS_MAPS}`, 
      `postcss-loader`, 
      `sass-loader?sourceMap=${CSS_MAPS}` 
     ].join('!') 
     }, 
     { 
     test: /\.(svg|eot|woff|woff2?|ttf|otf)$/, 
     use: 'base64-font-loader' 
     }, 
     { 
     test: /.json$/, 
     loader: 'json' 
     }, 
     { 
     test: /\.jpe?g$|\.gif$|\.png$/, 
     use: 'base64-image-loader' 
     }, 
     { 
     test: /\.html?$/, 
     loader: 'html' 
     }, 
     { 
     test: /\.js$/, 
     loader: 'strip-loader?strip[]=debug,strip[]=console.log,strip[]=console.debug,strip[]=console.info' 
     } 
    ] 
    }, 
    plugins: [ 
    new webpack.LoaderOptionsPlugin({ 
     minimize: true 
     // postcss: [ 
     // autoprefixer({ browsers: 'last 2 versions' }) 
     // ] 
    }), 
    new CopyWebpackPlugin([ 
{ from: 'public' } 
    ]), 
    new ExtractTextPlugin('[name].bundle.css'), 
    new webpack.DefinePlugin({ 
     ENV: JSON.stringify(ENV), 
// Only used for react prod bundle. Refer to ENV.NODE_ENV for business 
logic 
     'process.env': { 
     'NODE_ENV': JSON.stringify('production') 
     } 
    }), 
    new webpack.NoEmitOnErrorsPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ 
     output: { 
     comments: false 
     }, 
     compress: { 
     unsafe_comps: true, 
     properties: true, 
     keep_fargs: false, 
     pure_getters: true, 
     collapse_vars: true, 
     unsafe: true, 
     warnings: false, 
     screw_ie8: true, 
     sequences: true, 
     dead_code: true, 
     drop_debugger: true, 
     comparisons: true, 
     conditionals: true, 
     evaluate: true, 
     booleans: true, 
     loops: true, 
     unused: true, 
     hoist_funs: true, 
     if_return: true, 
     join_vars: true, 
     cascade: true, 
     drop_console: true 
     } 
    }) 
    ] 
} 

おかげ

Answer 1

あなたの設定ファイルに2回。 これを削除してこれを使用してください。 ご使用になる前に、nom install raw-loader'. I think you've already installed the sass-loader`が必要です。

{ 
    test: /\.css$/, 
    include: helpers.root('src', 'app'), 
    loader: 'raw-loader' 
}, 
// // css global which not include in components 
{ 
    test: /\.css$/, 
    exclude: helpers.root('src', 'app'), 
    use: ExtractTextPlugin.extract({ 
    use: 'raw-loader' 
    }) 
}, 

{ 
    test: /\.scss$/, 
    include: helpers.root('src', 'app'), 
    use: ['raw-loader', 'sass-loader'] 
}, 
// // SASS global which not include in components 
{ 
    test: /\.scss$/, 
    exclude: helpers.root('src', 'app'), 
    use: ExtractTextPlugin.extract({ 
    use: ['raw-loader', 'sass-loader'] 
    }) 
} 

私のroot()機能を追加します。

var path = require('path'); 
var _root = path.resolve(__dirname, '..'); 
function root(args) { 
    args = Array.prototype.slice.call(arguments, 0); 
    return path.join.apply(path, [_root].concat(args)); 
} 
exports.root = root; 

これがうまくいきます。