For questions please post on Stack Overflow and use the 'webpack' tag (http://stackoverflow.com/tags/webpack).
sokra on hashing
move responsibility of exports … (compare)
dependabot-preview[bot] on npm_and_yarn
dependabot-preview[bot] on npm_and_yarn
chore(deps-dev): bump eslint-pl… (compare)
dependabot-preview[bot] on npm_and_yarn
chore(deps-dev): bump eslint-pl… (compare)
hello,
I am trying to load the fonts through vue.config.js. However I am not getting it.
scss
@include font-face(Lato, '/fonts/lato/latoThin', 100, normal, eot woff2 woff svg ttf);
vue.config.js
....
rules: [{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: 'lato/[name].[ext]',
outputPath: 'fonts/'
}
}]
},
if I remove the first slash from the source path, fonts/lato/latoThin
it loads the fonts, but in compile this error appears
* ./fonts/lato/latoThin.eot? in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./node_module
s/resolve-url-loader!./src/styles/global.scss
and put the bar back in the font path and it works - /fonts/lato/latoThin
Any solution?
ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/rchristian/Company/assets'
resolve './src' in '/Users/rchristian/Company/assets'
using description file: /Users/rchristian/Company/assets/package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
using description file: /Users/rchristian/Company/assets/package.json (relative path: ./src)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/rchristian/Company/assets/src is not a file
.wasm
Field 'browser' doesn't contain a valid alias configuration
/Users/rchristian/Company/assets/src.wasm doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
/Users/rchristian/Company/assets/src.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/rchristian/Company/assets/src.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/Users/rchristian/Company/assets/src.json doesn't exist
as directory
existing directory
using path: /Users/rchristian/Company/assets/src/index
using description file: /Users/rchristian/Company/assets/package.json (relative path: ./src/index)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/rchristian/Company/assets/src/index doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
/Users/rchristian/Company/assets/src/index.wasm doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
/Users/rchristian/Company/assets/src/index.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/rchristian/Company/assets/src/index.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/Users/rchristian/Company/assets/src/index.json doesn't exist
{
mode: 'production',
module: {
rules: [{
test: /\.s[ac]ss$/i,
use: ['sass-loader'],
}],
},
}
{
mode: 'production',
entry: [
path.join(__dirname, './src/stylesheets/postcss.scss'),
path.join(__dirname, './src/stylesheets/google_fonts.scss'),
],
output: {
path: path.join(__dirname, './dist/stylesheets'),
publicPath: './dist/stylesheets',
},
plugins: [
new CopyPlugin([{
from: 'src/images/',
to: path.join(__dirname, './dist/images/'),
}, {
from: 'src/fonts/',
to: path.join(__dirname, './dist/fonts/'),
}]),
],
module: {
rules: [{
test: /\.s[ac]ss$/i,
use: [
'css-loader',
'sass-loader',
],
}],
},
}
dist/stylesheets/main.js
-> contents look like minified CSS
filename: 'styles.css',
, the file is suddenly readable (indented correctly), and I can see webpack bundler code, plus stuff.../***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(0)(false);
// Module
exports.push([module.i, "/*!\n * Font Awesome 4.4.0 by @davegandy ...
Hello!
I'm exploring source codes of webpack and mini-css-extract-plugin
and I have a question: why two different structures Dependency
and Module
were introduced? Why Module
structure is not enough? If I'm not mistaken Dependency
has only information about what should be built and Module
has all algorithms about building, caching and so on. Am I correct? In this case in mini-css-extract-plugin
CssDependency
looks a bit strange, because it does all receives prepared contents from loader and CssModule
only exposes prebuilt sources.
import "./assets/css/base.css";
hello,
I am trying to load the fonts through vue.config.js. However I am not getting it.
scss
@include font-face(Lato, '/fonts/lato/latoThin', 100, normal, eot woff2 woff svg ttf);
vue.config.js
....
rules: [{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: 'lato/[name].[ext]',
outputPath: 'fonts/'
}
}]
},
if I remove the first slash from the source path, fonts/lato/latoThin
it loads the fonts, but in compile this error appears
* ./fonts/lato/latoThin.eot? in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./node_module
s/resolve-url-loader!./src/styles/global.scss
and put the bar back in the font path and it works - /fonts/lato/latoThin
Any solution?
Have you tried using the url-loader?
Not yet, I'll try