错误:在babel构建后找不到scss模块错误
我正在尝试将react库发布到npm，但在我的本地npm版本中，由于scss文件而出现错误。我正在使用babel来转换为es5，但是最终的文件仍然需要scss文件。
例如，我的原始console.js文件具有以下导入：
import './console.scss'我生成的导致错误的console.js文件包含以下内容：
require('./console.scss')我得到一个错误：Error: Cannot find module './console.scss'
我正在通过创建本地npm包来测试这一点。我的流程是：
npm run build
npm run build:babel
npm pack 然后我在另一个项目中安装这个包来测试它，在那里我得到了错误。
这是我的package.json：
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "dist/index.js",
"scripts": {
"start": "nodemon server.js",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"build-watch": "webpack -w",
"build-babel": "babel src --presets babel-preset-es2015 --out-dir dist"
},
"author": "",
"license": "ISC",
"babel": {
"presets": [
"es2015",
"react"
]
},
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-plugin-css-modules-transform": "^1.2.7",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.0",
"express": "^4.15.2",
"html-loader": "^0.4.5",
"node-sass": "^4.5.2",
"node-sass-loader": "^0.1.7",
"nodemon": "^1.11.0",
"path": "^0.12.7",
"sass-loader": "^6.0.3",
"style-loader": "^0.16.1",
"webpack": "^2.3.3"
}
}这是我的webpack配置：
'use strict';
const webpack = require('webpack')
const path = require('path')
module.exports = {
entry: "./src/indexLocal.js",
output: {
path: path.join(__dirname, 'src'),
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015'],
},
},
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader'],
}
,{
test: /.html$/,
loader: 'html-loader',
query: {
minimize: true
}
}
]
}
};如何确保我的npm包包含原始样式，而不会因为导入scss文件而出错？干杯
回答 2
Stack Overflow用户
发布于 2018-07-19 05:25:19
当你运行build-babel脚本时，它会用你编译后的代码创建dist文件夹，但是它不会移动你的sass文件，所以你需要另一个npm脚本来将你的sass文件移动到dist文件夹中。
Stack Overflow用户
发布于 2019-01-14 17:44:14
我遇到了同样的问题，但是我正在开发一个高度可配置的monorepo代码库。您可以按照@Nomz在他的回答中所说的那样做，或者使用这个包https://www.npmjs.com/package/babel-plugin-sass-export
如果您下载了该软件包，请确保将该插件添加到babel配置中，他们在安装部分中没有提到这一点(也许这太明显了？)
此包将为您处理scss文件，但请确保阅读其NPM页面上的警告/问题，这不应用于生产。
在我的情况下，我将使用Webpack将东西捆绑在一起，或者使用Gulp解决方案来处理捆绑。
https://stackoverflow.com/questions/43376243
复制相似问题