CODEWITHSUNDEEP
reactjswebpack
Burak Karasoy
Burak Karasoy

Reputation: 1690

Webpack 2 How to handle @import statement?

I've have been learning how to set a reactjs project with webpack.

So I'm trying to make this project 000-landing-page run with webpack configuration. I want to use extract-text-webpack-plugin.

But in css file there are import statements;

@import "https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900";
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css";

And these lines causes errors

"unexpected character @ you may need an appropriate loader to handle this file type"

actually exception is clear but I couldn't find appropriate loader. I've installed html, file, url loaders and tried a few configurations but couldn't get it done.

these are my css and scss loaders

 {
          test: /\.css$/,
          include: [ path.resolve(__dirname, "/node_modules/")],
          loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
           loader: [
           'css-loader',
            'postcss-loader',
          ],
          })
        },
        {
            test: /\.scss$/,
            include: [ path.resolve(__dirname, "/node_modules/")],
            loader: ExtractTextPlugin.extract({
            fallbackLoader: 'style-loader',
             loader: [
               'postcss-loader',
               'sass-loader',
             'css-loader',
            ],
            }),
        }

Upvotes: 1

Views: 337

Answers (2)

Burak Karasoy
Burak Karasoy

Reputation: 1690

It had nothing to do with @symbol. I missed a tiny point due to being a beginner about webpack.

If nothing is included using include : [] it means every files are included

If something is included using include : [file x] it means any files included except file x.

since i added " include: [ path.resolve(__dirname, "/node_modules/")], " it only includes node_modules not my src folder.

Upvotes: 1

Skiing
Skiing

Reputation: 21

I understand the loader order is right-to-left. This would make the loader array for the scss to be:

['css-loader', 'postcss-loader', 'sass-loader']

This is because it is essentially a composed function i.e. css(postcss(sass(file)))

Upvotes: 1

Related Questions