Adding css loader
One more thing to use Single File Component (.vue file), css-loader.
Here is a quick way to add css-laoder to webpack config.
Install packages
yarn add css-loader node-sass sass-loader mini-css-extract-plugin -D
webpack config
In your webpack.config, add modules rules like
module.exports = {
...
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
},
],
}
...
}
In your webpack.config, add plugins like
var MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
...
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: 'components.css'
})
]
...
}
In your html, load css.
<link rel="stylesheet" href="/assets/components.css">
I am using jekyll-assets to these files to be digested.