首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >无法在webpack 4中加载css文件

无法在webpack 4中加载css文件
EN

Stack Overflow用户
提问于 2018-07-01 05:31:02
回答 1查看 5.7K关注 0票数 0

给出了下面的webpack 4配置:

const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const devMode = process.env.NODE_ENV !== 'production'
const devFlagPlugin = new webpack.DefinePlugin({
  __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
})

module.exports = {
    mode: "development",
    entry: [
        'webpack-dev-server/client?http://0.0.0.0:3000',
        'webpack/hot/only-dev-server',
        "./app/app.js"
    ],
    output: {
        path: path.join(__dirname, "build"),
        filename: "bundle.js"
    },
    devtool: 'eval-source-map',
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            { 
                test: /\.jsx|\.js?$/, 
                loader: 'babel-loader',
                options: {
                    plugins: [
                        'react-hot-loader/babel'
                    ]
                },
                exclude: /node_modules/},
            {
                test: /\.jsx|\.js$/,
                exclude: /node_modules/,
                use: [
                'babel-loader?' + JSON.stringify({presets: ['env', 'react']}),
                {
                    loader: 'eslint-loader'
                }]
            },
            {
                test: /\.css$/,
                include: /stylesheets|node_modules/,
                use: [ MiniCssExtractPlugin.loader, 'css-loader' ]
            },
            {
                test: /\.scss$/,
                include: /stylesheets/,
                use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ]
            },
            {
                test: /\.(jpg|png|gif|eot|woff|ttf|svg)/,
                loader: "file"
            }
        ]
    },
    devServer: {
        contentBase: "./build",
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
        devFlagPlugin,
        new webpack.NoEmitOnErrorsPlugin()
    ]

};

我正在尝试从app.js中的/stylesheets/app.css加载一个css文件:

require('./stylesheets/app.css')
let routes = (
    <div className="app">
        <Router>
            <div>hello</div>
        </Router>
    </div>
)

render(routes, document.getElementById('root'))

app.css文件定义为:

html {
    font-family: "Open Sans",Arial,sans-serif;
    font-size: 20px;
    height: 100%;
}

但是当我开始这个程序的时候:

webpack-dev-server --host 0.0.0.0 --port 3000 --hot --progress --colors

该内容没有与之关联的样式。

我是不是在webpack的配置里漏掉了什么?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-01 06:54:49

如果其他人遇到同样的问题,这里是css/scss加载器的正确配置:

{
    test: /\.css$/,
    include: /stylesheets|node_modules/,
    use: ["style-loader", "css-loader"]
},
{
    test: /\.scss$/,
    include: /stylesheets/,
    use: [ 'style-loader', 'css-loader', 'sass-loader' ]
}

不使用MiniCssExtractPlugin.loader;它仅用作插件。

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51118656

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档