Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Style-import not working

See original GitHub issue

Version

15.0.0

Reproduction link

https://jsfiddle.net/CinKon/0w11j0o2/1/

Steps to reproduce

I followed the migration Guide for v.15, but can’t get it work. This is my webpack config:

export default {
  entry: utils.removeEmpty(utils.entryPoints),
  output: {
    path: utils.paths.PUBLIC_PATH,
    publicPath: './'
  },
  resolve: {
    extensions: ['.vue', '.js'],
    modules: [utils.resolve(utils.kittnConf.src.base), utils.resolve('node_modules')]
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        options: {
          configFile: ifProduction('./.eslintrc.js', './.eslintrc-dev.js'),
          formatter: require('eslint-friendly-formatter')
        },
        exclude: /node_modules/,
        include: utils.resolve(utils.kittnConf.src.base)
      },
      {
        test: /\.js$/,
        use: 'babel-loader',
        include: utils.resolve(utils.kittnConf.src.base),
        exclude: /node_modules/
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'vue-style-loader', 'postcss-loader', 'css-loader']
      },
      {
        test: /\.scss$/,
        include: [utils.resolve(utils.kittnConf.src.style), utils.resolve(utils.kittnConf.src.js)],
        exclude: [utils.resolve('node_modules'), utils.resolve(utils.kittnConf.dist.base)],
        use: [
          MiniCssExtractPlugin.loader,
          'style-loader',
          'vue-style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(png|jpe?g|gif)(\?\S*)?$/,
        exclude: path.resolve(utils.paths.IMAGE_ROOT),
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              fallback: 'file-loader',
              outputPath: utils.assetsPath('img/'),
              publicPath: utils.assetsPath('img/'),
              name: '[name].[ext]'
            }
          }
        ]
      },
      {
        test: /\.(eot|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader',
        query: {
          outputPath: utils.assetsPath('fonts/'),
          publicPath: 'fonts/',
          name: '[name].[ext]'
        }
      },
      {
        test: /\.svg$/,
        include: path.resolve(utils.paths.IMAGE_ROOT),
        use: [
          {
            loader: 'svg-sprite-loader',
            options: {
              esModule: false,
              extract: false,
              spriteFilename: ifDevelopment(
                utils.assetsPath('img/sprite.svg'),
                utils.assetsPath('img/sprite.[hash].svg')
              )
            }
          },
          'svg-fill-loader',
          'svgo-loader'
        ]
      }
    ]
  },
  plugins: utils.removeEmpty([
    new MiniCssExtractPlugin({
      filename: utils.assetsPath('[name].css')
    })
  ])
}

In my Vue-Files, I import *.scss files like this:


<style lang="scss" scoped>
@import '_assets/collapse';
</style>

What is expected?

Vue-Files are being processed correctly.

What is actually happening?

Errors:

ERROR in ./src/js/components/molecules/Collapse/Collapse.vue?vue&type=style&index=0&id=764b9471&lang=scss&scoped=true
Module parse failed: Unexpected character '@' (111:0)
You may need an appropriate loader to handle this file type.
|
|
| @import '_assets/collapse';
|
 @ ./src/js/components/molecules/Collapse/Collapse.vue 4:0-92
 @ ./src/js/components/organisms/TheSummary/TheSummary.vue?vue&type=script&lang=js
 @ ./src/js/components/organisms/TheSummary/TheSummary.vue
 @ ./src/js/components/templates/TheWrapper/TheWrapper.vue?vue&type=script&lang=js
 @ ./src/js/components/templates/TheWrapper/TheWrapper.vue
 @ ./src/js/app.vue?vue&type=script&lang=js
 @ ./src/js/app.vue
 @ ./src/js/vue-app.js
 @ ./src/js/main.js
 @ multi webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true&overlay=true ./src/js/main.js