Vue 2 + Webpack: Accessing Assets Folder - css

Question

I have my assets in the /src/assets/ folder, specifically /src/assets/stylesheets/file.css but I cannot seem to bundle them. In my main.js file I've included the following
require('./assets/stylesheets/file.css')
but it does not work. I see:
Module not found: Error: Can't resolve './assets/stylesheets/codrops.css' in '/Users/USERNAME/Documents/Projects/vue/APPNAME/src'
# ./src/main.js 9:0-43
# multi ./build/dev-client ./src/main.js
I've tried using ../assets and that didn't work either.
Here's my build/webpack.base.conf.js file:
var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'#': resolve('src')
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
EDIT: I've updated this file to look like:
var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const extractCSS = new ExtractTextPlugin({ filename: 'css.bundle.css' })
const extractSASS = new ExtractTextPlugin({ filename: 'sass.bundle.css' })
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'#': resolve('src')
}
},
module: {
// loaders: [
// { test: /\.css$/, loader: "style-loader!css-loader" }
// ],
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.css$/,
use: extractCSS.extract({ // Instance 1
fallback: 'style-loader!css-loader',
use: [ 'css-loader' ]
})
},
{
test: /\.scss$/,
use: extractSASS.extract({ // Instance 2
fallback: 'style-loader',
use: [ 'css-loader', 'sass-loader' ]
})
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
plugins: [
extractCSS,
extractSASS
]
}
but when I require the .css: require("./assets/now-ui-kit.css"); I see the following:
error in ./src/assets/now-ui-kit.css
Module build failed: ModuleBuildError: Module build failed: Unknown word (5:1)
3 | // load the styles
4 | var content = require("!!../../node_modules/css-loader/index.js?{\"minimize\":false,\"sourceMap\":false}!./now-ui-kit.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
| ^
6 | if(content.locals) module.exports = content.locals;
7 | // add the styles to the DOM
8 | var update = require("!../../node_modules/vue-style-loader/lib/addStylesClient.js")("94a1c16e", content, false);

Answer 1

It doesn't look like you have any css loader in your webpack config file. Add the following imports, rules and plugins to your file to accomplish the css bundling:
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const extractCSS = new ExtractTextPlugin({ filename: 'css.bundle.css' })
const extractSASS = new ExtractTextPlugin({ filename: 'sass.bundle.css' })
const config = {
module: {
rules: [
{
test: /\.css$/,
use: extractCSS.extract({ // Instance 1
fallback: 'style-loader',
use: [ 'css-loader' ]
})
},
{
test: /\.scss$/,
use: extractSASS.extract({ // Instance 2
fallback: 'style-loader',
use: [ 'css-loader', 'sass-loader' ]
})
}
]
},
plugins: [
extractCSS // Instance 1
extractSASS // Instance 2
]
}
Here is where I took the code snippet from and here is the webpack css documentation.