Vue-loader: Style-import not working

[DotCoyote]

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

[shinygang]

ERROR in ./src/components/common/wx-pay.vue?vue&type=style&index=0&lang=postcss (./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/eslint-loader??ref--12!./src/components/common/wx-pay.vue?vue&type=style&index=0&lang=postcss)
Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
|
| .weixin-pay-content {
|   text-align: center;
| .title {
 @ ./src/components/common/wx-pay.vue?vue&type=style&index=0&lang=postcss 1:0-253 1:269-272 1:274-524 1:274-524
 @ ./src/components/common/wx-pay.vue
 @ ./src/views/wallet/account-deposit.js

遇到类似的问题。

Version:
"vue-loader": "^15.0.0",

webpack.config.js 里面.vue的rule配置如下：

    {
        test: /\.vue$/,
        type: 'javascript/auto',
        loader: 'vue-loader',
        options: vueLoaderConfig,
        exclude: [path.resolve(__dirname, 'node_modules')],
        include: [path.resolve('src')],
      }

[robcresswell]

I've logged a similar issue. I feel that the migration guide is lacking, and webpacks error messages are so vague its impossible to debug.

[yyx990803]

https://github.com/vuejs/vue-loader/issues/1251#issuecomment-384278913

[adamchenwei]

What would be the explanation on how this issue point to issue #1251? it is nothing related to this sass problem, as well as the page link that ticket was directed to. This should not be closed. @yyx990803

[yyx990803]

@adamchenwei this is a year-old issue. The original problem was users upgrading from v14 to v15 missing the plugin which is required for v15.