账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    webpack里面引入的sass老是报错
    22
    0

    我想尝试着搭建一个可以混合使用css,less,sass的项目。参照webpack官网配置的。我用一个less文件做样式入口,然后@import其他的样式文件。可是在引入sass文件时老是报错,求大神给看看。

    webpack配置文件

    const path = require ( 'path' )
    const webpack = require ( 'webpack' )
    const HtmlPlugin = require ( 'html-webpack-plugin' )
    const CleanPlugin = require ( 'clean-webpack-plugin' )
    const ExtractPlugin = require ( 'extract-text-webpack-plugin' );
    
    const ExtractLess = new ExtractPlugin ( {
            filename : "[name].[contenthash].css" ,
    } )
    module.exports = {
            entry : {
                    app : './src/index.js'
            } ,
            output : {
                    path : path.resolve ( __dirname , 'dist' ) ,
                    filename : '[name]-[chunkhash].js' ,
                    chunkFilename : "[name]-chunk.js"
            } ,
            module : {
                    rules : [
                            {
                                    test : /\.less$/ ,
                                    use : ExtractLess.extract ( {
                                            use : [
                                                    { loader : 'css-loader' } ,
                                                    { loader : 'less-loader' }
                                            ] ,
                                            fallback : 'style-loader'
                                    } )
                            } ,
                            {
                                    test : /\.scss$/ ,
                                    use : [
                                            { loader : 'style-loader' } ,
                                            { loader : 'css-loader' } ,
                                            { loader : 'sass-loader' }
                                    ]
                            }
                    ]
            } ,
            plugins : [
                    new CleanPlugin ( [ 'dist' ] ) ,
                    new HtmlPlugin ( {
                            title : '插件自动生成的页面' ,
                            template : './index.html'
                    } ) ,
                    new webpack.optimize.CommonsChunkPlugin ( {
                            name : 'manifest'
                    } ) ,
                    ExtractLess
            ]
    }

    备注:里面所需要的各种loader插件什么的该下载了,我都参照官网npm install了。

    报错信息

    
    clean-webpack-plugin: D:\MyAssets\webpack-3-1\dist has been removed.
    Hash: 929a0fc027508c020baa
    Version: webpack 3.10.0
    Time: 1727ms
                               Asset       Size  Chunks             Chunk Names
         app-5e2b60814625e85e8f4e.js    1.32 kB       0  [emitted]  app
    manifest-490e86b2e25d1c4799ec.js     5.8 kB       1  [emitted]  manifest
                          index.html  446 bytes          [emitted]  
       [0] ./src/index.js 21 bytes {0} [built]
       [1] ./src/hello.less 822 bytes {0} [built] [failed] [1 error]
       [2] ./node_modules/less-loader/dist/stringifyLoader.js!./src/good.scss 1.19 kB [built]
       [3] ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js!./src/hello.less 301 bytes [built] [failed] [1 error]
        + 2 hidden modules
    
    ERROR in ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js!./src/hello.less
    Module build failed: 
    
    // load the styles
    var content = require("!!../node_modules/css-loader/index.js!../node_modules/sass-loader/lib/loader.js!./good.scss");
              ^
    Unrecognised input
          in D:\MyAssets\webpack-3-1\src\good.scss (line 4, column 12)
     @ ./src/hello.less 4:14-115
     @ ./src/index.js
    
    ERROR in ./src/hello.less
    Module build failed: ModuleBuildError: Module build failed: 
    
    // load the styles
    var content = require("!!../node_modules/css-loader/index.js!../node_modules/sass-loader/lib/loader.js!./good.scss");
              ^
    Unrecognised input
          in D:\MyAssets\webpack-3-1\src\good.scss (line 4, column 12)
        at runLoaders (D:\MyAssets\webpack-3-1\node_modules\webpack\lib\NormalModule.js:195:19)
        at D:\MyAssets\webpack-3-1\node_modules\loader-runner\lib\LoaderRunner.js:364:11
        at D:\MyAssets\webpack-3-1\node_modules\loader-runner\lib\LoaderRunner.js:230:18
        at context.callback (D:\MyAssets\webpack-3-1\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
        at <anonymous>
        at process._tickCallback (internal/process/next_tick.js:188:7)
     @ ./src/hello.less
     @ ./src/index.js
    Child html-webpack-plugin for "index.html":
         1 asset
           [0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.html 731 bytes {0} [built]
           [2] (webpack)/buildin/global.js 509 bytes {0} [built]
           [3] (webpack)/buildin/module.js 517 bytes {0} [built]
            + 1 hidden module
    Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/less-loader/dist/cjs.js!src/hello.less:
           [0] ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js!./src/hello.less 301 bytes {0} [built] [failed] [1 error]
           [1] ./node_modules/less-loader/dist/stringifyLoader.js!./src/good.scss 1.19 kB [built]
        
        ERROR in ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js!./src/hello.less
        Module build failed: 
        
        // load the styles
        var content = require("!!../node_modules/css-loader/index.js!../node_modules/sass-loader/lib/loader.js!./good.scss");
                  ^
        Unrecognised input
              in D:\MyAssets\webpack-3-1\src\good.scss (line 4, column 12)
    npm ERR! code ELIFECYCLE
    npm ERR! errno 2
    npm ERR! webpack-3-1@1.0.0 dev: `webpack --colors`
    npm ERR! Exit status 2
    npm ERR!
    npm ERR! Failed at the webpack-3-1@1.0.0 dev script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\DELL\AppData\Roaming\npm-cache\_logs\2017-12-30T02_23_18_602Z-debug.log
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    网站公告
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部