SystemJS 无法从 webpack 包中加载 scss 和 css
SystemJS unable to load scss and css from webpack bundle
我有一个通过 webpack 捆绑的 angular 应用程序。
这是我的 Webpack.config
module.exports = {
entry: {
app: './src/app.module.ts',
mock: './test/mocks/mocks.ts'
},
output: {
path: __dirname + '/dist',
filename: '[name].bundle.js',
libraryTarget: 'commonjs',
sourceMapFilename: '[name].bundle.js.map'
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
loaders: [
{
test: /\.ts$/,
use: [
{ loader: 'awesome-typescript-loader' },
{ loader: 'tslint-loader', options: { emitErrors: true, failOnHint: true, rulesDirectory: './node_modules/tslint-microsoft-contrib' } }]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.html$/,
loader: "raw-loader"
},
{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader", // translates CSS into CommonJS
options: {
sourceMap: true
}
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
},
{
test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
}
],
},
devtool: 'source-map'
}
下面是我如何将 scss 导入 angular 模块。
import 'app.scss';
在另一个使用 JSPM 的项目中使用此 angular 应用程序的想法。我能够加载 angular 模块,但是 systemJS 无法从 app.bundle.js
加载 scss 和 css
此外,我的 systemJs 配置使用 "css": "github:systemjs/plugin-css@0.1.33",
,如果有帮助的话。
不确定,我缺少什么?如果有任何帮助或想法,我将不胜感激。
想通了。采取了不同的方法,使用 umd 而不是 commonJS 并将 css 捆绑到单独的 .css 文件中。这是我的更新配置。
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: {
app: './src/app.module.ts',
mock: './test/mocks/mocks.ts'
},
plugins: [
new ExtractTextPlugin('app.css')
],
output: {
path: __dirname + '/dist',
filename: '[name].bundle.js',
libraryTarget: 'commonjs',
sourceMapFilename: '[name].bundle.js.map'
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
loaders: [
{
test: /\.ts$/,
use: [
{ loader: 'awesome-typescript-loader' },
{ loader: 'tslint-loader', options: { emitErrors: true, failOnHint: true, rulesDirectory: './node_modules/tslint-microsoft-contrib' } }]
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader!sass-loader'
})
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
}
],
},
devtool: 'source-map'
}
我有一个通过 webpack 捆绑的 angular 应用程序。
这是我的 Webpack.config
module.exports = {
entry: {
app: './src/app.module.ts',
mock: './test/mocks/mocks.ts'
},
output: {
path: __dirname + '/dist',
filename: '[name].bundle.js',
libraryTarget: 'commonjs',
sourceMapFilename: '[name].bundle.js.map'
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
loaders: [
{
test: /\.ts$/,
use: [
{ loader: 'awesome-typescript-loader' },
{ loader: 'tslint-loader', options: { emitErrors: true, failOnHint: true, rulesDirectory: './node_modules/tslint-microsoft-contrib' } }]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.html$/,
loader: "raw-loader"
},
{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader", // translates CSS into CommonJS
options: {
sourceMap: true
}
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
},
{
test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
}
],
},
devtool: 'source-map'
}
下面是我如何将 scss 导入 angular 模块。
import 'app.scss';
在另一个使用 JSPM 的项目中使用此 angular 应用程序的想法。我能够加载 angular 模块,但是 systemJS 无法从 app.bundle.js
此外,我的 systemJs 配置使用 "css": "github:systemjs/plugin-css@0.1.33",
,如果有帮助的话。
不确定,我缺少什么?如果有任何帮助或想法,我将不胜感激。
想通了。采取了不同的方法,使用 umd 而不是 commonJS 并将 css 捆绑到单独的 .css 文件中。这是我的更新配置。
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: {
app: './src/app.module.ts',
mock: './test/mocks/mocks.ts'
},
plugins: [
new ExtractTextPlugin('app.css')
],
output: {
path: __dirname + '/dist',
filename: '[name].bundle.js',
libraryTarget: 'commonjs',
sourceMapFilename: '[name].bundle.js.map'
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
loaders: [
{
test: /\.ts$/,
use: [
{ loader: 'awesome-typescript-loader' },
{ loader: 'tslint-loader', options: { emitErrors: true, failOnHint: true, rulesDirectory: './node_modules/tslint-microsoft-contrib' } }]
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader!sass-loader'
})
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
}
],
},
devtool: 'source-map'
}