我担心这个问题可能过于宽泛,但我希望在我的 webpack 设置方面得到一些帮助。
我使用 Angular 设置了一个大型 MEAN 堆栈。该解决方案目前在功能上与 Webpack 构建一起使用。
到目前为止,我使用的是纯 css 文件,它们在组件声明中被 Angular 引用,例如:
@Component({
selector: 'something',
templateUrl: 'template',
styleUrls: ['some_component_style.css', 'other.css']
})
但是我计划在未来将我所有的 css 文件迁移到 sass 文件,但是我有点不确定我是如何在 Webpack 中设置它的。
这是我当前的 webpack 配置:
webpack.config.common.js:
var webpack = require('webpack');
module.exports = {
entry: {
'app': './assets/app/main.ts'
},
resolve: {
extensions: ['.js', '.ts']
},
module: {
rules: [
{
test: /\.html$/,
use: [{ loader: 'html-loader' }]
},
{
test: /\.css$/, // for legacy purposes
use: [{ loader: 'raw-loader' }]
},
{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|tff|eot|ico)$/,
use: [{ loader: 'file-loader?name=assets/[name].[hash].[ext]' }]
}
],
exprContextCritical: false
}
};
webpack.config.dev.js:
var path = require('path');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.config.common.js');
module.exports = webpackMerge(commonConfig, {
devtool: 'cheap-module-eval-source-map',
output: {
path: path.resolve(__dirname + '/public/js/app'),
publicPath: "/js/app/",
filename: 'bundle.js',
chunkFilename: '[id].chunk.js'
},
module: {
rules: [
{
test: /\.ts$/,
use: [
{loader: 'awesome-typescript-loader', options: {
transpileOnly: true
}},
{loader: 'angular2-template-loader'},
{loader: 'angular-router-loader'}
]
}
]
}
});
webpack.config.prod.js:
const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
var path = require('path');
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.config.common.js');
module.exports = webpackMerge.smart(commonConfig, {
entry: {
'app': './assets/app/main.aot.ts'
},
output: {
path: path.join(__dirname + '/public/js/app'),
filename: 'bundle.js',
publicPath: '/js/app/',
chunkFilename: '[id].[hash].chunk.js'
},
module: {
rules: [
{
test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
loader: '@ngtools/webpack'
},
{
test: /\.ts$/,
use: [
'awesome-typescript-loader',
'angular2-template-loader',
'angular-router-loader?aot=true'
]
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
sourceMap: false
}),
new AngularCompilerPlugin({
tsConfigPath: './tsconfig.json',
entryModule: './assets/app/app.module#AppModule',
sourceMap: true
})
]
});
和我的来自 package.json 的构建脚本:
"scripts": {
"start": "node ./bin/www",
"build": "del-cli public/js/app && webpack --config webpack.config.dev.js --progress --profile --watch",
"build:prod": "del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progress --profile --bail && del-cli 'public/js/app/**/*.js' 'public/js/app/**/*.js.map' '!public/js/app/bundle.js' '!public/js/app/*.chunk.js' 'assets/app/**/*.*.ngfactory.ts' 'assets/app/**/*.shim.ts' 'assets/app/**/*.ngsummary.json' 'assets/app/**/*.ngstyle.ts'",
},
我知道使用 sass 设置解决方案可能会受益于完全不同的结构。例如,我使用过不使用 'styleUrls' Angular 标记的解决方案,因为没有为此设置 sass。但只为整个站点生成了一个大的 css 文件。我想这是对这个问题的一种“牢记”,但主要问题是:
如何使用 webpack 从使用 css 文件迁移到 sass 文件? (我使用的是 webpack 3.x)
最佳答案
您的 webpack 配置没问题。
您始终可以混合使用全局 scss 和组件 scss,正如您所说,Angular 样式声明为每个组件隔离了 css(或 scss),这是您想要的功能。
但是如果你还想拥有全局样式,你可以这样做:
在/src/styles/文件夹中创建一个 styles.scss
从您的 app.module.ts(元素的根模块)中,只需像这样导入 scss 文件(显然选择正确的路径):
import '../styles/styles.scss';
现在您可以使用 styles.scss 导入将全局应用于您的元素的其他 scss(或 css)文件。
作为示例,这是我在 styles.scss 中的元素:
@import '_bootstrap_settings.scss';
@import "~bootstrap/scss/bootstrap";
@import '~c3/c3';
// Angular Material Theme
@import "~@angular/material/prebuilt-themes/indigo-pink";
@import 'variables';
关于javascript - Angular Webpack 设置 : Migrate from css to sass using webpack,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51556501/