Vue-loader: Cannot load the file that scss file loads

[C0deZLee]

I'm trying to include a scss file in my Layout.vue:

...
<style>
@import url("../css/_variable.scss");
</style>
...

and in _variable.scss, i'm including two png files which is from css/patterns.

my project structure is like this:

|--components
   |--...
   |-- **Layout.vue**
   |--...
|--css
   |-- **_variable.scss**
   |--patterns
      |-- **shattered.png**
      |-- **header-profile**
|--routers
|--views
|--store

and now I got the following errors and stack here for 2 days and still have no clue how to solve it:

ERROR in ./~/css-loader?sourceMap!./client/css/_variable.scss
Module not found: Error: Can't resolve 'patterns/shattered.png' in '/Users/SteveLeeLX/CodeRepository/classgotcha/statics/client/css'
 @ ./~/css-loader?sourceMap!./client/css/_variable.scss 6:885-918
 @ ./~/css-loader?sourceMap!./~/vue-loader/lib/style-rewriter.js?id=data-v-1!./~/vue-loader/lib/selector.js?type=styles&index=0!./client/components/Layout.vue
 @ ./~/vue-style-loader!./~/css-loader?sourceMap!./~/vue-loader/lib/style-rewriter.js?id=data-v-1!./~/vue-loader/lib/selector.js?type=styles&index=0!./client/components/Layout.vue
 @ ./client/components/Layout.vue
 @ ./client/app.js
 @ ./client/index.js
 @ multi client

ERROR in ./~/css-loader?sourceMap!./client/css/_variable.scss
Module not found: Error: Can't resolve 'patterns/header-profile.png' in '/Users/SteveLeeLX/CodeRepository/classgotcha/statics/client/css'
 @ ./~/css-loader?sourceMap!./client/css/_variable.scss 6:1047-1085
 @ ./~/css-loader?sourceMap!./~/vue-loader/lib/style-rewriter.js?id=data-v-1!./~/vue-loader/lib/selector.js?type=styles&index=0!./client/components/Layout.vue
 @ ./~/vue-style-loader!./~/css-loader?sourceMap!./~/vue-loader/lib/style-rewriter.js?id=data-v-1!./~/vue-loader/lib/selector.js?type=styles&index=0!./client/components/Layout.vue
 @ ./client/components/Layout.vue
 @ ./client/app.js
 @ ./client/index.js
 @ multi client

ERROR in ./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-5!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./client/components/SideBar.vue
Module build failed:
  background: darken($gray, 3%);
                    ^
      Undefined variable: "$gray".
      in /Users/SteveLeeLX/CodeRepository/classgotcha/statics/client/components/SideBar.vue (line 9, column 22)
 @ ./~/style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-5!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./client/components/SideBar.vue 4:14-257 13:2-17:4 14:20-263
 @ ./client/components/SideBar.vue
 @ ./~/babel-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./client/components/Layout.vue
 @ ./client/components/Layout.vue
 @ ./client/app.js
 @ ./client/index.js
 @ multi client

and this is my webpack config:

'use strict'
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const config = require('./config')
const _ = require('./utils')

module.exports = {
  entry: {
    client: './client/index.js'
  },
  output: {
    path: _.outputPath,
    filename: '[name].js',
    publicPath: './'
  },
  resolve: {
    extensions: ['', '.js', '.vue', '.css', '.json'],
    alias: {
      root: path.join(__dirname, '../client'),
      components: path.join(__dirname, '../client/components')
    }
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loaders: ['vue'],
        exclude: [/node_modules/]
      },
      {
        test: /\.js$/,
        loaders: ['babel'],
        exclude: [/node_modules/]
      },
      {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      },
      {
        test: /\.es6$/,
        loaders: ['babel'],
        exclude: [/node_modules/]
      },
      {
        test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
        loader: 'file',
        query: {
          name: 'static/media/[name].[hash:8].[ext]'
        }
      }
    ]
  },
  cssLoader: {
    includePaths: [path.resolve(__dirname, "./client/css")]
  },
  babel: config.babel,
  postcss: config.postcss,
  vue: {
    loaders: { scss: 'style!css!sass' },
    postcss: config.postcss
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: config.title,
      template: __dirname + '/index.html',
      filename: _.outputIndexPath
    })
  ],
  target: _.target
}

[C0deZLee]

Ok so after added

patterns: path.join(__dirname,'../client/css/patterns')

to resolve.alias in webpack config, I got rid of the first two errors, however the third error still exists, anyone has ideas?

[yyx990803]

1. Try using relative paths (that start with ./) in your CSS urls
2. Different <style> tags in different Vue files are compiled separately. There's no implicit concatenation. Importing variables in one file doesn't magically make them available in all child components.

[romines]

What is the correct way to share styles and sass variables across components?