diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json index 9dde17dc0c9f..81d1b563d993 100644 --- a/examples/vue-kitchen-sink/package.json +++ b/examples/vue-kitchen-sink/package.json @@ -36,6 +36,7 @@ "prop-types": "^15.7.2", "svg-url-loader": "^3.0.2", "vue-loader": "^15.7.0", + "vue-style-loader": "^4.1.2", "webpack": "^4.33.0", "webpack-dev-server": "^3.8.2" } diff --git a/examples/vue-kitchen-sink/webpack.config.js b/examples/vue-kitchen-sink/webpack.config.js index 42d89b8c123b..2587213e415f 100644 --- a/examples/vue-kitchen-sink/webpack.config.js +++ b/examples/vue-kitchen-sink/webpack.config.js @@ -27,10 +27,15 @@ module.exports = { }, { test: /\.(png|jpg|gif)$/, - loader: 'file-loader', - options: { - name: '[name].[ext]?[hash]', - }, + use: [ + { + loader: 'url-loader', + options: { + esModule: false, + fallback: 'file-loader', + }, + }, + ], }, { test: /\.svg$/, @@ -45,6 +50,21 @@ module.exports = { include: [path.resolve(__dirname, '../stories')], enforce: 'pre', }, + { + test: /\.css$/, + use: [ + 'vue-style-loader', + { + loader: 'css-loader', + options: { + // enable CSS Modules + modules: true, + // customize generated class names + localIdentName: '[local]_[hash:base64:8]', + }, + }, + ], + }, ], }, resolve: { diff --git a/yarn.lock b/yarn.lock index 835eaa986551..f33971df0e9b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -29049,7 +29049,7 @@ vue-property-decorator@8.2.2: dependencies: vue-class-component "^7.0.1" -vue-style-loader@^4.1.0: +vue-style-loader@^4.1.0, vue-style-loader@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8" integrity sha512-0ip8ge6Gzz/Bk0iHovU9XAUQaFt/G2B61bnWa2tCcqqdgfHs1lF9xXorFbE55Gmy92okFT+8bfmySuUOu13vxQ==