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，但也沒有工作。

這裏是我的構建/ 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是我從接過代碼段，here是的WebPack CSS文檔。