main.js引用css出现错误提示You may need an appropriate loader to handle this file type.本人确定已经安装
发布于 7 年前 作者 lovechenlao 4517 次浏览 最后一次编辑是 7 年前 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

我已经安装了style-loader和css loader这是package.json文件 { “name”: “zhou”, “description”: “A Vue.js project”, “version”: “1.0.0”, “author”: “zhou”, “private”: true, “scripts”: { “dev”: “cross-env NODE_ENV=development webpack-dev-server --open --hot”, “build”: “cross-env NODE_ENV=production webpack --progress --hide-modules” }, “dependencies”: { “bootstrap”: “^3.3.7”, “element-ui”: “^1.0.0-rc.9”, “less”: “^2.7.2”, “less-loader”: “^4.0.3”, “vue”: “^2.2.1”, “vue-resource”: “^1.2.1”, “vue-router”: “^2.3.1”, “vuex”: “^2.2.1” }, “devDependencies”: { “babel-core”: “^6.0.0”, “babel-loader”: “^6.0.0”, “babel-preset-latest”: “^6.0.0”, “cross-env”: “^3.0.0”, “css-loader”: “^0.25.0”, “file-loader”: “^0.9.0”, “jquery”: “^3.2.1”, “node-sass”: “^4.5.0”, “sass-loader”: “^5.0.1”, “style-loader”: “^0.16.1”, “vue-loader”: “^11.1.4”, “vue-template-compiler”: “^2.2.1”, “webpack”: “^2.2.0”, “webpack-dev-server”: “^2.2.0” } }

main.js import Vue from ‘vue’ import App from ‘./App.vue’ import VueRouter from “vue-router”; import VueResource from ‘vue-resource’ import ‘element-ui/lib/theme-default/index.css’ import elementui from ‘element-ui’ Vue.use(elementui);

并在webpack.config.js中配置css

ar path = require(‘path’) var webpack = require(‘webpack’)

module.exports = { entry: ‘./src/main.js’, output: { path: path.resolve(__dirname, ‘./dist’), publicPath: ‘/dist/’, filename: ‘build.js’ }, module: { rules: [{ test: /.vue$/, loader: ‘vue-loader’, options: { loaders: { // Since sass-loader (weirdly) has SCSS as its default parse mode, we map // the “scss” and “sass” values for the lang attribute to the right configs here. // other preprocessors should work out of the box, no loader config like this necessary. ‘scss’: ‘vue-style-loader!css-loader!sass-loader’, ‘sass’: ‘vue-style-loader!css-loader!sass-loader?indentedSyntax’ } // other vue-loader options go here } }, { test: /.js$/, loader: ‘babel-loader’, exclude: /node_modules/ }, { test: /\.css$/, loader: “style-loader!css-loader” }, { test: /.less$/, loader: “style-loader!css-loader!less-loader”, }, { test: /\.(eot|woff|woff2|ttf)([\?]?.*)$/, loader: “file-loader” }, { test: /.(png|jpg|gif|svg)$/, loader: ‘file-loader’, options: { name: ‘[name].[ext]?[hash]’ } }

    ]
},
resolve: {
    alias: {
         'vue$': 'vue/dist/vue'
    }
},
devServer: {
    historyApiFallback: true,
    noInfo: true
},
performance: {
    hints: false
},
devtool: '#eval-source-map'

}

if (process.env.NODE_ENV === ‘production’) { module.exports.devtool = ‘#source-map’ // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ ‘process.env’: { NODE_ENV: ‘“production”’ } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }

回到顶部