Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

webpack config to use both css and scss files

Tags:

webpack

I want to import a .css file in my app.jsx which has some theme specific code, but then my components are styled using scss files.

How can I do that? Here is my webpack config which works only for scss files, I thought i could put a wildcard and it'd work for both.

test: /\.(s?)css$/,
use: [
  {
    loader: 'style-loader',
    options: {
      hmr: true
    }
  },
  {
    loader: 'css-loader',
    options: {
      modules: true,
      importLoaders: 1,
      localIdentName: '[name]__[local]___[hash:base64:5]'
    }
  },
  {
    loader: 'sass-loader'
  },
  {
    loader: 'postcss-loader',
    options: {
      plugins: [autoprefixer({ browsers: ['last 3 versions'] })]
    }
  }
]
like image 528
a person Avatar asked Sep 14 '18 02:09

a person


People also ask

Can you use CSS and SCSS together?

SCSS syntax is CSS compatible, so you just have to rename your . css file to . scss et voilà! Your first SCSS file has been created, just like that.

Can webpack compile SCSS?

sass-loader is a loader for Webpack for compiling SCSS/Sass files. style-loader injects our styles into our DOM. css-loader interprets @import and @url() and resolves them. mini-css-extract-plugin extracts our CSS out of the JavaScript bundle into a separate file, essential for production builds.

How do I bundle a CSS file in webpack?

By default, Webpack will inline your CSS as Javascript tags that injects the CSS into the page. This sounds strange but it lets you do hot reloading in development. In production you extract them to a file using the ExtractTextPlugin, and require it with a normal link tag.

Can webpack process CSS files?

To be able to use CSS in your webpack app, you need to set up a new loader. Out-of-the-box, webpack only understands Javascript and JSON. With a loader, you can translate another type of file to a format that webpack understands and can work with. There are many webpack loaders and each loader has a specific purpose.


2 Answers

Try this. I have tested it. Worked well for me.

{
    test: /\.(sa|sc|c)ss$/,
    use: [
            {
                loader: 'style-loader',
                options: {
                    hmr: true
                }
            },
            {
                loader: 'css-loader',
                options: {
                   modules: true,
                   importLoaders: 1,
                   localIdentName: '[name]__[local]___[hash:base64:5]',
                },
           },
           {
               loader: 'postcss-loader',
               options: {
                   plugins: [autoprefixer({ browsers: ['> 1%'] })]
               },
            },
            'sass-loader'
        ],
}

Also small advice: don't use 'last 3 versions' like this: plugins: [autoprefixer({ browsers: ['last 3 versions'] })] it will include a lot of dead browsers. Check it here.

'> 1%' is better

like image 196
Arseniy-II Avatar answered Oct 06 '22 06:10

Arseniy-II


You can write different rules for css and scss files where u can remove sass loader for css files.

test: /\.scss$/,
use: [
  {
    loader: 'style-loader',
    options: {
      hmr: true
    }
  },
  {
    loader: 'css-loader',
    options: {
      modules: true,
      importLoaders: 1,
      localIdentName: '[name]__[local]___[hash:base64:5]'
    }
  },
  {
    loader: 'sass-loader'
  },
  {
    loader: 'postcss-loader',
    options: {
      plugins: [autoprefixer({ browsers: ['last 3 versions'] })]
    }
  }
]


test: /\.css$/,
use: [
  {
    loader: 'style-loader',
    options: {
      hmr: true
    }
  },
  {
    loader: 'css-loader',
    options: {
      modules: true,
      importLoaders: 1,
      localIdentName: '[name]__[local]___[hash:base64:5]'
    }
  },
//removed sass loader
  {
    loader: 'postcss-loader',
    options: {
      plugins: [autoprefixer({ browsers: ['last 3 versions'] })]
    }
  }
]

Below is my personal setup for css & scss files

webpack.config.js

{
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            importLoaders: 2,
                        },
                    },
                    {
                        loader: 'resolve-url-loader',
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            importLoaders: 3,
                        },
                    },
                    {
                        loader: 'resolve-url-loader',
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },

postcss.config.js

module.exports = {
    plugins: [
        require('postcss-cssnext')({
            warnForDuplicates: false,
            features: {
                customProperties: false,
            },
        }),
        require('postcss-flexbugs-fixes')(),
        process.env.NODE_ENV === 'production'
            ? require('cssnano')({
                    preset: 'default',
              })
            : '',
    ],
};
like image 34
Gautam Naik Avatar answered Oct 06 '22 05:10

Gautam Naik