Exploring the potential of Vue2, I find myself facing a dilemma with incorporating lost-grid () into my application. Having successfully utilized this postcss grid-system in react apps with webpack2 multiple times, I am now unsure how to implement it with vue-loader.
Despite installing 'lost' via npm and attempting various approaches to include the postcss loader, none of my efforts have yielded results so far. The documentation has not proven very helpful either.
The crucial section of webpack.base.conf.js is as follows (where it seems that all CSS loading is handled by the vue-loader):
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: "pre",
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
...
Looking at vue-loader.conf.js:
var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'
module.exports = {
loaders: utils.cssLoaders({
sourceMap: isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap,
extract: isProduction
})
}
Here is a glimpse into utils.js:
var path = require('path')
var config = require('../config')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
exports.assetsPath = function (_path) {
var assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
...
As I navigate through these files, a question arises – where should each piece fit in? Any guidance on this matter would be immensely appreciated.