Ответ 1
Хорошо, так что людям легко увидеть, что я сделал, чтобы заставить его работать здесь:
Мне кажется, мне было легче полностью удалить scss и просто пойти с модулями css из коробки. Это, казалось, очень помогло.
Я использовал git @github.com: christianalfoni/webpack-express-boilerplate.git, чтобы помочь мне вести себя. Знать, что у меня была рабочая вещь, на самом деле научила меня черту гораздо больше, чем я, скорее всего, научился раньше в веб-пакете. Как вы можете догадаться, это было не так много: D
Также одним из основных изменений, которые действительно помогли, было изменение пути не удивительно. Но это были относительно пола пути в output.path, я читал это раньше, но думал, что был относительно wepack.config.js, а не от того, что оттуда все будет считаться корнем документа, даже для html и css.
** КЛЮЧЕВАЯ ЧАСТЬ:) **
Мне также нужно обновить мою экспресс-настройку, поскольку я не дал ей путь express.static... О, моя глупость, как я мог пропустить такую основную вещь. Итак:
Экспресс
app.use(express.static(__dirname + '/public/')); //Don't forget me :(
Конечный CSS
/* Webfont: Lato-Black */@font-face {
font-family: 'LatoBlack';
src: url('/font/Lato-Black.eot'); /* IE9 Compat Modes */
src: url('/font/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/font/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
url('/font/Lato-Black.woff') format('woff'), /* Modern Browsers */
url('/font/Lato-Black.ttf') format('truetype');
font-style: normal;
font-weight: normal;
text-rendering: optimizeLegibility;
}
Wekpack.config
'use strict';
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var qs = require('querystring');
var precss = require('precss');
var autoprefixer = require('autoprefixer');
var stripInlineComments = require('postcss-strip-inline-comments');
module.exports = {
devtool: 'eval-source-map',
// resolve: { modulesDirectories: ['node_modules'], extension: ['', '.js', '.css'] },
entry: [
'webpack-hot-middleware/client?reload=true',
path.join(__dirname, 'src/client/js/Kindred')
// path.join(__dirname, 'app/main')
],
output: {
path: path.join(__dirname, '/public/'),
filename: '[name].js',
publicPath: '/'
},
plugins: [
new HtmlWebpackPlugin({
template: 'public/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
],
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {"presets": ["react", "es2015", "stage-0", "react-hmre"]}
}, {
test: /\.json?$/,
loader: 'json'
},
{
test: /\.jpg$/, loader: "file-loader"
},
{
test: /\.css$/,
loaders: [
'style-loader',
'css-loader?importLoaders&' + qs.stringify({
modules: true,
importLoaders: 1,
localIdentName: '[path][name]-[local]'
}),
'postcss-loader?parser=postcss-scss'
]
},
// Font Definitions
{ test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=font/[name].[ext]' },
{ test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=font/[name].[ext]' },
{ test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=font/[name].[ext]' },
{ test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=font/[name].[ext]' },
{ test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=font/[name].[ext]' }
]
},
postcss: function (webpack) {
return [
stripInlineComments
, precss
, autoprefixer
, require('postcss-simple-vars')
, require('postcss-nested'
, autoprefixer({browsers: ['last 2 versions']}))
];
}
};
Я хочу извинить всех, кто пытался. Я чувствую, что в конце концов я был далеко. Я только публикую этот факт, у кого-то возникают подобные проблемы. То, что я возьму от этого, - это просто использовать эту плиту котла. Из-за этого статическая часть и parths внутри html.