shakacode / bootstrap-loader

Load Bootstrap styles and scripts in your Webpack bundle

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to extract styles in right way?

IvanKalinin opened this issue · comments

Hi there.
I need some help to setting up configuration to extract files.

With that configuration budle.css includes the only bootstrap styles.

if I use bootstrap-loader in vendor instead then bundle.css includes the only app styles.

I need both bootstrap and app styles in one budle.css file

module.exports = {
  ......
  entry: {
    ......
    vendor: {
       ......
      bootstrap-loader/extractStyles
    },
    module: {
        rules: [
          {
            test: /\.s?css$/,
            exclude: /node_modules/,
            use: ExtractTextPlugin.extract({
              fallback: 'style-loader',
              use: [
                {
                  loader: 'css-loader',
                  options: {
                    importLoaders: 2,
                    modules: true,
                    localIdentName: '[name]__[local]_[hash:base64:5]',
                  },
                },
                {
                  loader: 'sass-loader',
                  options: {
                    includePaths: [
                      path.join(__dirname, './components/src/assets/styles'),
                    ],
                  },
                },
                {
                  loader: 'sass-resources-loader',
                  options: {
                    resources: [
                      './components/src/assets/styles/_variables.scss',
                      './components/src/assets/styles/_mixins.scss',
                    ],
                  },
                },
                'postcss-loader',
              ],
            }),
          },
      .........
       ]
.......

       plugins: [
       .......
       new ExtractTextPlugin({ filename: 'css/bundle.css', disable: false, allChunks: true }),
       .....
       ]
.......
  },

@IvanKalinin I think this is more of a Stack Overflow than an "issue".

If you want personalized help on this, please consider our ShakaCode Pro Support Plan.