出现这个问题是因为ts不知道这种模块的类型定义，所以我们需要手动加入自定义模块类型定义。在项目根目录下新建@types文件夹，在此目录下建立index.d.ts文件：
// ./@types/index.d.ts
declare module '*.pcss' {
const content: any;
export = content;
}
保存之后就不会看到编辑器报错了，但是terminal里webpack打包会提示出错，因为我们还没有加对应的loader。
配置.pcss文件的解析规则
js都组件化了，css模块化也是很有必要的，不用再为避免取重复类名而烦恼。我们在base配置里新导出一个方法用以获取postcss的规则。
// ./src/webpack/base.ts
...
export const getPostCssRule = (styleLoader) => ({
test: /\.pcss$/,
use: [
styleLoader,
{
loader: 'css-loader',
options: {
camelCase: true,
importLoaders: 1,
localIdentName: '[path][name]---[local]---[hash:base64:5]',
modules: true,
},
},
{
loader: 'postcss-loader',
options: {
plugins: () => [
require('postcss-import')({
path: path.join(baseDir, './src/client/style'),
}),
require('postcss-cssnext'),
require('postcss-nested'),
require('postcss-functions')({
functions: {
x2(v, u) {
return v * 2 + (u ? u : 'px');
},
},
}),
],
},
},
],
});
...
我们可以从上面这个方法看到，要处理 .pcss 文件需要用到三个loader，按处理顺序从下往上分别是postcss-loader， css-loader， 还有一个变量styleLoader，至于这个变量是什么，我们可以看使用到该方法的地方：
// ./src/webpack/client.ts
...
(clientDevConfig.module as webpack.NewModule).rules.push(
...
getPostCssRule({
loader: 'style-loader',
}),
...
);
...
// ./src/webpack/server.ts
...
(clientDevConfig.module as webpack.NewModule).rules.push(
...
getPostCssRule({
loader: 'isomorphic-style-loader',
}),
...
);
...
客户端和服务端处理样式文件需要使用到不同的styleLoader。
PostCSS简介
PostCSS是一个使用js来转换css的工具，这个是官方介绍。其配合webpack使用的loader就是postcss-loader，但是只有单个postcss-loader其实没有什么用，需要配合其插件来实现强大的功能。
1、postcss-import
这个插件我这里使用的原因是为了在样式文件中@import时避免复杂的路径编写，我设定好path值，那么我在其它任何层级下的样式文件中要引入path对应文件夹里的公共变量样式文件(假设叫"variables.pcss")时就非常方便，只需要写import 'variables.pcss';就可以了，当然如果找不到对应的文件，它会忽略path使用默认相对路径来查找。