Question

我通过以下方式设置JavaScript开发环境。

https://channel9.msdn.com/Events/Seth-on-the-Road/Codemash-2017/Build-a-JavaScript-Development-Environment-in-30-minutes

我的HTML看起来像。（很简单）

<html>
    <head>
        <style>
            body {
                background-image: url("weather.png");
                background-repeat: repeat;
            }
        </style>

    <link rel="stylesheet" type="text/css" href="./index.css">
    </head>
    <body>
        <h1>Hi All</h1>

    </body>
</html>

图像和CSS都在同一文件夹中。但是，内联CSS和外部CSS都不起作用。如果我将其放在简单的HTML文件中，则可以正常工作，但是在javascript dev env之后；不起作用。

以下是我对package.json的依赖。

"author": "",
  "license": "ISC",
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.17.0",
    "babel-loader": "6.2.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-latest": "^6.16.0",
    "eslint": "^5.12.1",
    "eslint-loader": "^2.1.1",
    "express": "^4.16.4",
    "jest": "^23.6.0",
    "npm-run-all": "^4.1.5",
    "open": "0.0.5",
    "style-loader": "0.13.1"
  },
  "eslintConfig": {
    "extends": [
      "eslint:recommended"
    ],
    "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module"
    },
    "env": {
      "browser": true,
      "jest": true
    },
    "rules": {
      "no-console": "off",
      "no-debugger": "warn"
    }
  },
  "babel": {
    "presets": [
      "latest"
    ]
  }

我遇到了类似的错误：

资源被解释为样式表，但以MIME类型text / html传输：“ http://localhost:3000/index.css”

以下是我的服务器文件。

import express from 'express';
import path from 'path';
import open from 'open';

const port = 3000;
const app = express();

app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, '../src/index.html'));
});

app.listen(port, function(err) {
    if (err) {
        console.log(err);
    } else {
        open('http://localhost:' + port);
    }
});

Answer 1

我很困惑，因为您使用Webpack而不使用react。但是无论如何，我知道Images。您应该为图像文件声明一个加载器，如下所示：

{
    test: /\.(jpg|png)$/,
    exclude: /(node_modules[\\\/])/,
    loader: 'file-loader',
    options: {
        limit: 1024,
        name: '[name].[ext]',
        publicPath: 'img/',
        outputPath: 'img/'
    }
}

但是对于您的CSS，这是我感到困惑的地方，在反应中，我应该将CSS引擎导入根组件，然后webpack为我生成一个CSS文件，但是在您的项目中，我真的不知道。也许应该这样写：

import CSS from 'styles.css'; // or any file like styles.scss or styles.less

然后使用ExtractTextPlugin生成CSS文件：

{
    test: /\.css$/,
    exclude: /(node_modules[\\\/])/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
            {
                loader: 'css-loader'
            }
        ]
    })
}

如果您想设置css-loader选项，请在下面使用：

{
    test: /\.pcss$/,
    exclude: /(node_modules[\\\/])/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
            {
                loader: 'css-loader',
                options: {
                    modules: true,
                    importLoaders: 1,
                    localIdentName: '[local]', // for production it should be [hash:base64:5]
                    sourceMap: true,
                }
            }
        ]
    })
},

如何解决未在我的项目中加载图片和CSS的问题？

1 个答案: