Я использую Webpack для рендеринга всех файлов Js и scss в файл. Все успешно скомпилировано в файл с именем bundle.js.
Поскольку я встраиваю bundle.js script в свой проект, javascript по-прежнему работает хорошо, но таблица стилей ничего не возвращает.
Я проверил пакетный файл, он все еще имеет compiled scss, как прикрепленное фото ниже.
Мой индексный файл выглядит так:
<html>
<head>
</head>
<body>
....
<script type="text/javascript" src="./public/bundle.js?ver=2018"></script>
</body>
Каталоги, подобные этой:
index.html
scss
- base.scss
src
- app.js
public
Файл конфигурации моего веб-пакета:
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');
const path = require('path');
const precss = require('precss');
const TransferWebpackPlugin = require('transfer-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
//mode: "production", //, // "production" | "development" | "none"
devtool: 'eval',
entry: [
//'./scss/base.scss',
'./src/app.js'
],
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js'
},
devServer: {
contentBase: 'public/', // Relative directory for base of server
publicPath: '/',
inline: true,
// host: 'http://localhost/sproj/', // Change to '0.0.0.0' for external facing server
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
cacheDirectory: true,
plugins: ['transform-class-properties']
}
},
{
test: /\.scss$/,
use: [
// {
// loader: 'file-loader',
// options: {
// name: '../css/[name].data.css',
// }
// },
{
loader: 'css-loader?-url'
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
use: ExtractTextPlugin.extract(Object.assign({
fallback: 'style-loader',
use: ['css-loader', 'postcss-loader']
}))
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 5000
}
}
]
}
]
}
};
Пожалуйста, дайте мне знать, как решить мою проблему. Большое спасибо.