引入css 后报错

[JJBreak]

描述：npm方式安装的 vue-easytable 我引入 import 'vue-easytable/libs/themes-base/index.css' 后，报 error in ./~/vue-easytable/libs/themes-base/index.css

Module build failed: Unknown word (5:1)

3 | // load the styles 4 | var content = require("!!../../../css-loader/index.js?{\"minimize\":false,\"sourceMap\":false}!./index.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("!../../../vue-style-loader/lib/addStylesClient.js")("0cd55501", content, false);

@ ./~/vue-easytable/libs/themes-base/index.css 4:14-141 13:2-17:4 14:20-147 @ ./~/babel-loader/lib!./~/vux-loader/src/script-loader.js!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/report/DailyReport.vue @ ./src/components/report/DailyReport.vue @ ./src/main.js @ multi ./build/dev-client ./src/main.js

[huangshuwei]

和https://github.com/huangshuwei/vue-easytable/issues/47 是一个问题。 试一下字体loader 配置是否有问题，更改后再重新运行试试。

 {
            test: /\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 5000,
                    name: 'font/[name]-[hash:8].[ext]'
                }
            }]

        }

[JJBreak]

还是不起作用,还是报一样的错误

[huangshuwei]

还是不起作用,还是报一样的错误

让我很苦恼啊，我自己安装测试没问题，把你的webpack 配置贴出来我看看

[JJBreak]

base.conf.js

var path = require('path') var utils = require('./utils') var config = require('../config') var vueLoaderConfig = require('./vue-loader.conf') const vuxLoader = require('vux-loader') var webpack = require('webpack') function resolve (dir) { return path.join(__dirname, '..', dir) }

const webpackConfig = { 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'), 'jquery': 'jquery' } }, 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 }, { test: /.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test')] }, { test: /.css$/, loader: "style-loader!css-loader" }, { test: /.less$/, loader: "style-loader!css-loader!less-loader"}, { test: /.(png|jpe?g|gif|svg)(\?.)?$/, loader: 'url-loader', query: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /.(woff2?|eot|ttf|otf)(\?.)?$/, loader: 'url-loader', query: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] } }

module.exports = vuxLoader.merge(webpackConfig, { options: {}, plugins: [ { name: 'vux-ui' }, { name: 'duplicate-style', events: { done: function () { console.log('done!') } } }, { name: 'script-parser', fn: function (source) { return source.replace('VARIABLE', 'v2') } }, { name: 'style-parser', fn: function (source) { return source.replace('black', 'white') } }, new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ] })

[huangshuwei]

@JJBreak 你需要加入字体类型 ‘woff’，然后再试下

[JJBreak]

{ test: /.(woff2?|eot|ttf|otf)(\?.)?$/, loader: 'url-loader', query: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } }, { test: /.(eot|woff|woff2|ttf|svg)(\?\S)?$/, use: [{ loader: 'url-loader', options: { limit: 5000, name: 'font/[name]-[hash:8].[ext]' } }]

    }

[JJBreak]

还是不起作用

[huangshuwei]

不是，还是用你的配置，只不过加一个字体类型

{
test: /.(eot|woff|woff2|ttf|svg)(?\S)?$/,
loader: 'url-loader',
query: {
    limit: 10000,
    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
   }
},

[JJBreak]

还是不行 我把css直接引入到页面了 但是如何引入滚动条事件

[huangshuwei]

@ALL 已修复，已发布 https://github.com/huangshuwei/vue-easytable/releases/tag/1.5.11