我試圖從bootstrap 4.0.0 beta scss使用webpack輸出一個css文件。我已經成功地使用內聯樣式注入來處理scss:https://getbootstrap.com/docs/4.0/getting-started/webpack/。有關於將樣式注入到文檔頭部的問題。Webpack bootstrap ExtractTextPlugin SCSS - 模塊解析失敗意外的字符'@'
,這裏是我的package.json:
{
"name": "testproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@types/knockout": "^3.4.46",
"bootstrap": "^4.0.0-beta",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.1",
"html-webpack-plugin": "^2.30.1",
"jquery": "^3.2.1",
"knockout": "^3.4.2",
"node-sass": "^4.5.3",
"popper.js": "^1.12.5",
"postcss-loader": "^2.0.8",
"precss": "^2.0.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"ts-loader": "^3.0.2",
"typescript": "^2.5.3",
"url-loader": "^0.6.2",
"webpack": "^3.7.1",
"webpack-notifier": "^1.5.0"
},
"-vs-binding": {
"BeforeBuild": [
"build"
]
},
"dependencies": {}
}
和我webpack.config.js(更新):
var path = require('path');
var webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractScss = new ExtractTextPlugin({
filename: 'dist/[name].[hash].css',
allChunks: true,
});
module.exports = {
entry: {
site: [
'./wwwroot/js/site.js',
'./Script/testkoviewmodel.ts'],
},
output: {
publicPath: "/dist/",
path: path.join(__dirname, '/wwwroot/dist/'),
filename: '[name].[hash].build.js',
},
plugins: [
extractScss,
new webpack.optimize.UglifyJsPlugin({
minimize: true,
compress: {
warnings: false
},
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
}),
new HtmlWebpackPlugin({
inject: false,
template: 'Views/Shared/_LayoutTemplate.cshtml',
filename: '../../Views/Shared/_Layout.cshtml',
}),
],
devtool: 'source-map',
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
},
{ test: /\.css$/, loader: "style-loader!css-loader" },
{
test: /\.scss$/,
use: extractScss.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
}),
exclude: /node_modules/,
},
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{ test: /\.(woff|woff2)$/, loader: "url?prefix=font/&limit=5000" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
]
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.scss'],
}
};
我試圖修改的所有方式到的WebPack配置按多很多人都有相同或相關的問題。到目前爲止,我顯然不成功。
**編輯!重要的:整個問題是排除屬性應該被引用,因爲它們不是正則表達式,而是在這種情況下的字符串。感謝BudHead!
這是解決方案。感謝您指出範圍問題!我不再收到錯誤。但是,我無法真正生成css文件。我需要將.scss和.css添加到我的解決方案聲明中嗎? –
帶css和sass加載器的extractTextPlugin應該將所有內容提取到它自己的.css文件中。可能還有其他問題。驗證extractTextPlugin中的文件名屬性是否與輸出對象中的文件名屬性匹配。 – Budhead2004
你確定我只需要導入'bootstrap';不需要引用bootstrap.scss?另外,在輸出中需要定義css文件的位置?我開始懷疑,我沒有得到有關@的錯誤的原因是什麼都沒有被處理? –