我正在我的 asp.net mvc 核心项目中使用 webpack。我能够捆绑 js 文件。但我无法解析我的字体路径。
我有这个 I's scss 文件:
$font-path: '../fonts' !global;
/*fonts*/
/* roboto-300 - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url('#{$font-path}/roboto-v15-latin-300.eot'); /* IE9 Compat Modes */
src: local('Roboto Light'), local('Roboto-Light'), url('#{$font-path}/roboto-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('#{$font-path}/roboto-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('#{$font-path}/roboto-v15-latin-300.woff') format('woff'), /* Modern Browsers */
url('#{$font-path}/roboto-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('#{$font-path}/roboto-v15-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
文件结构:
└── Project
├── assets
│ └── scripts
│ └── main.ts
│ └── scss
│ └── fonts
│ └── roboto-condensed-v13-latin-700.eot
│ └── main.scss
│
└── webpack.config.js
var path = require('path');
var extractTextPlugin = require("extract-text-webpack-plugin");
var cleanWebpackPlugin = require('clean-webpack-plugin');
var webpack = require('webpack');
module.exports = {
entry: {
'role/role': './assets/scripts/role/roleVM.ts',
main: './assets/scripts/main.ts',
vendor: ["bootstrap", "popper.js", "jquery"]
},
output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, 'wwwroot/dist/')
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.scss$/,
use: extractTextPlugin.extract({
use: [{
loader: "css-loader", options: {
sourceMap: true
}
}, {
loader: "resolve-url-loader"
},
{
loader: "sass-loader", options: {
sourceMap: true
},
}],
fallback: 'style-loader'
}),
exclude: /node_modules/
},
{
test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
}
]
},
plugins: [
new cleanWebpackPlugin(['dist'], {
root: path.resolve(__dirname, 'wwwroot'),
verbose: true,
dry: false
}),
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'js/vendor.js' }),
new extractTextPlugin("./css/main.css"),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'Popper': 'popper.js'
})
],
resolve: {
extensions: [".tsx", ".ts", ".js", '.scss'],
modules: [
path.resolve('./'),
path.resolve('./node_modules'),
]
}
};
当我构建 webpack 时,出现错误:
ERROR in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./assets/scss/main.scss Module not found: Error: Can't resolve '../fonts/roboto-condensed-v13-latin-700.eot' in 'C:\project\src\project\assets\scss' @ ./node_modules/css-loader?{"sourceMap":true}!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./assets/scss/main.scss 6:215433-215491
最佳答案
您可以尝试添加以下两个选项吗?
- 将entry.devtool选项添加到您的webpack配置中。
ExtractTextPlugin 有一个 publicPath 选项可以解决此问题。
module.exports = { entry: { 'role/role': './assets/scripts/role/roleVM.ts', main: './assets/scripts/main.ts', vendor: ["bootstrap", "popper.js", "jquery"] }, output: { filename: 'js/[name].js', path: path.resolve(__dirname, 'wwwroot/dist/') }, devtool:'source-map', //..1. add devtool option to source-map module: { rules: [ { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, }, { test: /\.scss$/, use: extractTextPlugin.extract({ publicPath:'', //2. add public path to your font folder in the build directory use: [{ loader: "css-loader", options: { sourceMap: true } }, { loader: "resolve-url-loader" }, { loader: "sass-loader", options: { sourceMap: true }, }], fallback: 'style-loader' }), exclude: /node_modules/ }, { test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, use: [{ loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'fonts/' } }] } ] }, plugins: [ new cleanWebpackPlugin(['dist'], { root: path.resolve(__dirname, 'wwwroot'), verbose: true, dry: false }), new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'js/vendor.js' }), new extractTextPlugin("./css/main.css"), new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', 'Popper': 'popper.js' }) ], resolve: { extensions: [".tsx", ".ts", ".js", '.scss'], modules: [ path.resolve('./'), path.resolve('./node_modules'), ] }
};
关于javascript - 使用 webpack 时解析 scss 文件中的字体路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45655059/