質問編集履歴

2 ソース記述短縮

msysmsys

msysmsys score 4

2017/11/17 15:11  投稿

WebpackでのSassコンパイルで「Invalid CSS after "module.exports"」
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;
}
body{
   margin: 0;
   font-weight: 200;
   font-family: 'Noto Sans Japanese';
}
img{
 max-width: 100%;
 height: auto;
}
/********************
module
********************/
.wrap{
 max-width: 800px;
 margin-right: auto;
 margin-left: auto;
 padding-right: 5%;
 padding-left: 5%;
}
.sitelogo{
 margin: 0;
 font-family: $quicksand;
}
.header
{
 border-bottom: solid 1px #ddd;
 @extend %SiteGradation;
 
 .wrap{
   padding-top: 20px;
   padding-bottom: 20px;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   
 }
 
 // &__logo{
 //  margin: 0;
 //  font-family: $quicksand;
 // }
}
.sitenav{
   font-family: $quicksand;
   text-align: right;
   
   .current{
     border-bottom: solid 1px #ccc;
   }
   li{
     margin-right: 10px;
     display: inline-block;
   } 
   
   a{
     padding: 10px;
     text-decoration: none;
   }
}
.footer{
 margin-top: 70px;
 border-top: solid 1px #ddd;
 font-family: $quicksand;
 @extend %SiteGradation;
 .wrap{
   padding-top: 20px;
   padding-bottom: 20px;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
 }
 
 &__nav{
   @extend .sitenav;
 }
 &__copyright{
   font-size: 0.5em;
   text-align: center;
 }
   
}
.main{
 margin-top: 50px;
}
//リンク先 component
.effect-enter {
 // opacity: 0;
 position: fixed;
 filter: blur( 0 );
 transform: translateY(0); 
}
//リンク先 Component マウント開始
.effect-enter.effect-enter-active {
 opacity: 0;
 filter: blur( 100px );
 transform: translateY(-10px);
}
//リンク元 Component
.effect-exit {
 opacity: 1;
 transform: translate(0, 0);
 position: fixed; 
}
//リンク元 Component アンマウント開始
.effect-exit.effect-exit-active {
 opacity: 0;
 transform: translate(0, 3vh);
}
.effectContainer{
 transition: all 1s ease 0s;
}
~~~
```
  • CSS

    9415 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Sass

    459 questions

    Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

  • webpack

    399 questions

1 本文修正

msysmsys

msysmsys score 4

2017/11/15 14:30  投稿

WebpackでのSassコンパイルで「Invalid CSS after "module.exports"」
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;
}
body{
   margin: 0;
   font-weight: 200;
   font-family: 'Noto Sans Japanese';
}
img{
 max-width: 100%;
 height: auto;
}
/********************
module
********************/
.wrap{
 max-width: 800px;
 margin-right: auto;
 margin-left: auto;
 padding-right: 5%;
 padding-left: 5%;
}
.sitelogo{
 margin: 0;
 font-family: $quicksand;
}
.header
{
 border-bottom: solid 1px #ddd;
 @extend %SiteGradation;
 
 .wrap{
   padding-top: 20px;
   padding-bottom: 20px;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   
 }
 
 // &__logo{
 //  margin: 0;
 //  font-family: $quicksand;
 // }
}
.sitenav{
   font-family: $quicksand;
   text-align: right;
   
   .current{
     border-bottom: solid 1px #ccc;
   }
   li{
     margin-right: 10px;
     display: inline-block;
   } 
   
   a{
     padding: 10px;
     text-decoration: none;
   }
}
.footer{
 margin-top: 70px;
 border-top: solid 1px #ddd;
 font-family: $quicksand;
 @extend %SiteGradation;
 .wrap{
   padding-top: 20px;
   padding-bottom: 20px;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
 }
 
 &__nav{
   @extend .sitenav;
 }
 &__copyright{
   font-size: 0.5em;
   text-align: center;
 }
   
}
.main{
 margin-top: 50px;
}
//リンク先 component
.effect-enter {
 // opacity: 0;
 position: fixed;
 filter: blur( 0 );
 transform: translateY(0); 
}
//リンク先 Component マウント開始
.effect-enter.effect-enter-active {
 opacity: 0;
 filter: blur( 100px );
 transform: translateY(-10px);
}
//リンク元 Component
.effect-exit {
 opacity: 1;
 transform: translate(0, 0);
 position: fixed; 
}
//リンク元 Component アンマウント開始
.effect-exit.effect-exit-active {
 opacity: 0;
 transform: translate(0, 3vh);
}
.effectContainer{
 transition: all 1s ease 0s;
}
```
  • CSS

    9415 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Sass

    459 questions

    Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

  • webpack

    399 questions

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る