Vue 2 + Webpack：访问资产文件夹

Question

我的资产在 /src/assets/ 文件夹中，特别是 /src/assets/stylesheets/file.css 但我似乎无法捆绑它们。在我的 main.js 文件中，我包含了以下内容

require('./assets/stylesheets/file.css')

但它不起作用。我明白了：

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

我尝试过使用 ../assets，但也没有用。

这是我的 build/webpack.base.conf.js 文件：

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]')
        }
      }
    ]
  }
}

编辑：我已将此文件更新为：

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
  ]
}

但是当我需要 .css 时：require("./assets/now-ui-kit.css"); 我看到以下内容：

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