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

看起来你的webpack配置文件中没有任何css加载器。将以下导入，规则和插件添加到您的文件中以完成css捆绑：

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是我从中获取代码段的地方，here是webpack css文档。

Vue 2 + Webpack: Accessing Assets Folder

1 个答案: