Hi all,
I can’t get my alias working. No errors. The config paths look correct.
webpack.config.js:
// eslint-disable-line
const webpack = require('webpack');
const merge = require('webpack-merge');
const CleanPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const CopyGlobsPlugin = require('copy-globs-webpack-plugin');
const config = require('./config');
const path = require('path');
const assetsFilenames = (config.enabled.cacheBusting) ? config.cacheBusting : '[name]';
function resolve (dir) {
return path.join(__dirname, '../../', dir);
}
let webpackConfig = {
context: config.paths.assets,
entry: config.entry,
devtool: (config.enabled.sourceMaps ? '#source-map' : undefined),
output: {
...
},
stats: {
...
},
module: {
rules: [
...
]
},
resolve: {
modules: [
config.paths.assets,
'node_modules',
'bower_components',
],
enforceExtension: false,
extensions: ['.scss'],
alias: {
'@': resolve('assets'),
'partials' : resolve('views/partials')
}
},
resolveLoader: {
moduleExtensions: ['-loader'],
},
externals: {
jquery: 'jQuery',
},
plugins: [
new CleanPlugin([config.paths.dist], {
root: config.paths.root,
verbose: false,
}),
new CopyGlobsPlugin({
...
}),
new ExtractTextPlugin({
...
}),
new webpack.ProvidePlugin({
...
}),
new webpack.LoaderOptionsPlugin({
...
}),
new webpack.LoaderOptionsPlugin({
...
}),
new webpack.LoaderOptionsPlugin({
...
}),
new StyleLintPlugin({
...
}),
],
};
/* eslint-disable global-require */ /** Let's only load dependencies as needed */
if (config.enabled.optimize) {
webpackConfig = merge(webpackConfig, require('./webpack.config.optimize'));
}
if (config.env.production) {
webpackConfig.plugins.push(new webpack.NoEmitOnErrorsPlugin());
}
if (config.enabled.cacheBusting) {
const WebpackAssetsManifest = require('webpack-assets-manifest');
webpackConfig.plugins.push(
new WebpackAssetsManifest({
...
})
);
}
if (config.enabled.watcher) {
webpackConfig.entry = require('./util/addHotMiddleware')(webpackConfig.entry);
webpackConfig = merge(webpackConfig, require('./webpack.config.watch'));
}
module.exports = webpackConfig;
If simple log out the webpackConfig object I see:
alias: {
'@' : '/Users/simon/Documents/htdocs/project-root/web/app/themes/instafail/resources/assets',
'partials': '/Users/simon/Documents/htdocs/project-root/web/app/themes/instafail/resources/views/partials'
}
in main.scss
@import "partials/header/index"; // tried "partials/header" & "partials/header/index.scss"
When I run the dev-server, the main.js file not produced, so that means something has gone wrong, but nothing in the console. It’s all very mysterious.
Currently having to do in main.scss:
@import "../../views/partials/header/index"; // I can live with this, but not the prettiest