質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.03%

WebpackでのSassコンパイルで「Invalid CSS after "module.exports"」

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,292

msysmsys

score 4

Webpackを介しSass(scss)のコンパイルをしようとすると

「Invalid CSS after "module.exports": expected "{", was '= "data:text/x-scss'
          in /Applications/MAMP/htdocs/〜〜〜パス名/style.scss」

と表示されてコンパイルできません。
ローダーのインストールも済んでおり記述も見直したのですが、なぜでしょうか。
ぱっと見る限りではimport記述が原因とも考えられるのですが。。
ご教示いただけますと幸いです。

エラーメッセージ

ERROR in ./node_modules/css-loader?-url&sourceMap&minimize!./node_modules/sass-loader/lib/loader.js?outputStyle=expanded&sourceMap=true&sourceMapContents=true!./node_modules/url-loader!./src/css/style.scss
Module build failed: 
@import "http://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css";
             ^
      Invalid CSS after "module.exports": expected "{", was '= "data:text/x-scss'
      in /Applications/MAMP/htdocs/_practice/react/__test/instaapi/src/css/style.scss (line 1, column 15)
 @ ./src/css/style.scss 4:14-245 18:2-22:4 19:20-251
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.js

ERROR in ./src/css/style.scss
Module build failed: ModuleBuildError: Module build failed: 
@import "http://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css";
             ^
      Invalid CSS after "module.exports": expected "{", was '= "data:text/x-scss'
      in /Applications/MAMP/htdocs/_practice/react/__test/instaapi/src/css/style.scss (line 1, column 15)
    at runLoaders (/Applications/MAMP/htdocs/_practice/react/__test/instaapi/node_modules/webpack/lib/NormalModule.js:195:19)
    at /Applications/MAMP/htdocs/_practice/react/__test/instaapi/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Applications/MAMP/htdocs/_practice/react/__test/instaapi/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/Applications/MAMP/htdocs/_practice/react/__test/instaapi/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.asyncSassJobQueue.push [as callback] (/Applications/MAMP/htdocs/_practice/react/__test/instaapi/node_modules/sass-loader/lib/loader.js:55:13)
    at Object.<anonymous> (/Applications/MAMP/htdocs/_practice/react/__test/instaapi/node_modules/async/dist/async.js:2244:31)
    at Object.callback (/Applications/MAMP/htdocs/_practice/react/__test/instaapi/node_modules/async/dist/async.js:906:16)
    at options.error (/Applications/MAMP/htdocs/_practice/react/__test/instaapi/node_modules/node-sass/lib/index.js:294:32)
 @ ./src/css/style.scss
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.js
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/style-loader/index.js!node_modules/css-loader/index.js?-url&sourceMap&minimize!node_modules/sass-loader/lib/loader.js?outputStyle=expanded&sourceMap=true&sourceMapContents=true!node_modules/url-loader/index.js!src/css/style.scss:
       [0] ./node_modules/css-loader?-url&sourceMap&minimize!./node_modules/sass-loader/lib/loader.js?outputStyle=expanded&sourceMap=true&sourceMapContents=true!./node_modules/url-loader!./src/css/style.scss 338 bytes {0} [built] [failed] [1 error]
       [1] ./node_modules/style-loader!./node_modules/css-loader?-url&sourceMap&minimize!./node_modules/sass-loader/lib/loader.js?outputStyle=expanded&sourceMap=true&sourceMapContents=true!./node_modules/url-loader!./src/css/style.scss 1.53 kB {0} [built]
       [2] ./node_modules/style-loader/lib/addStyles.js 9.41 kB {0} [built]
       [3] ./node_modules/style-loader/lib/urls.js 3.01 kB {0} [built]

    ERROR in ./node_modules/css-loader?-url&sourceMap&minimize!./node_modules/sass-loader/lib/loader.js?outputStyle=expanded&sourceMap=true&sourceMapContents=true!./node_modules/url-loader!./src/css/style.scss
    Module build failed: 
    @import "http://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css";
                 ^
          Invalid CSS after "module.exports": expected "{", was '= "data:text/x-scss'
          in /Applications/MAMP/htdocs/_practice/react/__test/instaapi/src/css/style.scss (line 1, column 15)
     @ ./node_modules/style-loader!./node_modules/css-loader?-url&sourceMap&minimize!./node_modules/sass-loader/lib/loader.js?outputStyle=expanded&sourceMap=true&sourceMapContents=true!./node_modules/url-loader!./src/css/style.scss 4:14-245 18:2-22:4 19:20-251
webpack: Failed to compile.

webpack.config.js

const path = require( 'path' );
const extractTextWebpackPlugin = require( 'extract-text-webpack-plugin');
const Etwp = new extractTextWebpackPlugin('css/bundle.css', { allChunks: true });


module.exports = {
    //ビルドの対象となるディレクトリ
    context: __dirname + '/src',

    //ビルドの起点となるディレクトリ
    entry: {
        bundle: __dirname + '/src/index.js'
    },

    //出力
    output: {
        // output.publicPath を指定すると、webpack-dev-server 起動時にバンドルしたモジュールはこの相対パスから配信されることになります。
        // ※(ouput.publicPath = '/assets/ とすると、モジュールのパスは /assets/bundle.js となります)
        publicPath: 'src',
        path: path.join( __dirname + '/' ),
        filename: '[name].js'        
    },

    module: {
        loaders: [
            {
                test: /.js$/,
                exclude: /node_module/,
                loader: 'babel-loader',
                query: {
                    presets: [ 'es2015', 'react' ]
                }
            },
            {
                test: /\.scss$/,
                loader: Etwp.extract('style-loader!css-loader?-url&sourceMap&minimize!sass-loader?outputStyle=expanded&sourceMap=true&sourceMapContents=true')

            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test: /(gif|jpg|png|svg|woff|ttf|eot|otf|map|css|scss)$/,
                loader: 'url-loader'
            }
        ]
    },

    devServer: {
        contentBase: path.resolve( __dirname, 'public' ),
    },

    plugins: [
        Etwp
    ],

    devtool: 'source-map'    
}

コンパイルしたいscss

@import "http://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css";
@import "http://fonts.googleapis.com/earlyaccess/notosansjapanese.css";
@import "http://fonts.googleapis.com/css?family=Cookie|Quicksand:500";
@import "http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
@import "../containers/api/slick/slick-theme.scss";

$quicksand : 'Quicksand', sans-serif;
$cookie : 'Cookie', cursive;

%SiteGradation{
background: #f7f7f7;
background: -moz-linear-gradient(left, #fff 0%, #ffffff 50%, #f7f7f7 50.1%, #f7f7f7 100%);
background: -webkit-linear-gradient(left, #fff 0%,#ffffff 50%, #f7f7f7 50.1%, #f7f7f7 100%);
background: linear-gradient(to right, #fff 0%,#ffffff 50%, #f7f7f7 50.1%, #f7f7f7 100%);
background-size: 50px;
background-repeat: repeat;
}
~~~
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる