vuejs-templates / webpack

A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Webpack does not include style from external package in Bundle

HamidOsouli-zz opened this issue · comments

commented

I'm using vue js template for webpack.
In my main.js file, I imported external package like this :

import vSelect from 'vue-select';
and I want to extract styles into css files with extract-text-plugin but webpack does not include ( styles from external package that is in some.js file in node_modules ) into css file and instead it creates style tag in head.
What can I do to tell webpack to extract all styles in js files in node_modules.
Which loader I should be using ?
This is my webpack config :

rules: [
          {
              test: /\.css$/,
              use: ExtractTextPlugin.extract({
                  fallback: "style-loader",
                  use: "css-loader"
              }),
          },
          {
              test: /\.scss$/,
              use: ExtractTextPlugin.extract({
                  fallback: "style-loader",
                  use: [
                      'vue-style-loader',
                      'css-loader',
                      'sass-loader?indentedSyntax'
                  ]
              })
          },
          {
              test: /\.sass$/,
              use: ExtractTextPlugin.extract({
                  fallback: "style-loader",
                  use: [
                      'vue-style-loader',
                      'css-loader',
                      'sass-loader?indentedSyntax'
                  ]
              })
          },
          {
              test: /\.vue$/,
              loader: 'vue-loader',
              options: {
                  loaders: {
                      // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
                      // the "scss" and "sass" values for the lang attribute to the right configs here.
                      // other preprocessors should work out of the box, no loader config like this necessary.
                      'scss': [
                          'vue-style-loader',
                          'css-loader',
                          {
                              loader: 'sass-loader',
                              options: {
                                  includePaths: [path.resolve(__dirname, './node_modules')],
                              },
                          },
                      ],
                      'sass': [
                          'vue-style-loader',
                          'css-loader',
                          'sass-loader?indentedSyntax'
                      ]
                  }
                  // other vue-loader options go here
              }
          },
          {
              test: /\.js$/,
              loader: 'babel-loader',
              exclude: /node_modules/
          },
          {
              test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
              loader: 'url-loader',
              options: {
                  limit: 10000,
                  name: utils.assetsPath('img/[name].[hash:7].[ext]')
              }
          },
          {
              test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
              loader: 'url-loader',
              options: {
                  limit: 10000,
                  name: utils.assetsPath('media/[name].[hash:7].[ext]')
              }
          },
          {
              test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
              loader: 'url-loader',
              options: {
                  limit: 10000,
                  name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
              }
          }
      ] 

Note that it is ok with css or sass or scss files.
My problem is with styles in js files.