예기치 않은 문자 '@'이 파일 형식을 처리하기 위해 적절한 로더가 필요할 수 있습니다.

Question

이것은 webpack을 실행하려고 할 때 얻는 것입니다. 오류는 "./v3/app/styles/main.scss에서 오류입니다. 모듈 구문 분석에 실패했습니다. /Users/vovina/widget-login-react/v3/app/styles/main.scss 예기치 않은 문자 '@'(1 : 0) 이 파일 유형을 처리하려면 적절한 로더가 필요할 수 있습니다. "

@import를 해결할 수 없습니까?

내 웹팩 설정은 다음과 같습니다

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

당신은 사용 | 구성 파일에서 두 번에 (SCS들 CSS를). 이것을 제거하고 이것을 사용하십시오. 사용하기 전에 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; 

희망.