Webpack 网页包sass加载程序无效CSS
每当运行构建时,我都会遇到此错误Webpack 网页包sass加载程序无效CSS,webpack,sass-loader,Webpack,Sass Loader,每当运行构建时,我都会遇到此错误 Invalid CSS after "module.exports": expected "{", was '= "data:text/x-scss' 我也尝试过使用一个普通的JS网页包配置,但得到了相同的错误,所以它不是TypeScript配置。也尝试提取文本网页包插件,但得到相同的错误。实际的应用程序运行良好,但显然没有CSS。这里是配置 import * as path from 'path'; import * as webpack from 'web
Invalid CSS after "module.exports": expected "{", was '= "data:text/x-scss'
我也尝试过使用一个普通的JS网页包配置,但得到了相同的错误,所以它不是TypeScript配置。也尝试提取文本网页包插件,但得到相同的错误。实际的应用程序运行良好,但显然没有CSS。这里是配置
import * as path from 'path';
import * as webpack from 'webpack'
const config: webpack.Configuration = {
entry: {
app: ['./js/main.ts']
},
output: {
path: path.resolve(__dirname, './dist/js'),
filename: '[name].js'
},
module: {
rules:[
{
test: /\.html$/,
loader: 'ngtemplate-loader?prefix=/&module=app&relativeTo=' + (path.resolve(__dirname, './js/app')) + '/!html-loader'
},
{
test: /\.ts$/,
loader: 'awesome-typescript-loader'
},
{
test: /\.(sass|scss|ttf|svg|woff)$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
}, {
loader: "url-loader"
}]
}
]
}
}
export default config
下面是主sass文件的片段
@import "utilities/variables";
@import "utilities/animations";
@import "utilities/helpers";
在主应用程序文件中导入的,包含:
import '../sass/sass.scss';
我认为错误是因为您不知何故对
Sass
文件使用了url加载程序。将webpack.config规则拆分为(sass | scss | ttf | svg | woff)
,如下所示:
{
test: /\.(ttf|svg|woff)$/,
use: [{
loader: "url-loader"
}]
},
{
test: /\.(sass|scss)$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
}]
}