Sage 10导入GLSL模块路径报错及正确导入方式咨询

操作步骤 #

• 安装GLSL文件加载依赖，在主题根目录执行命令：
  npm install raw-loader --save-dev
• 编辑项目根目录的webpack.mix.js文件，添加GLSL格式文件的处理规则，在现有配置中补充如下代码段：

mix.webpackConfig({
  module: {
    rules: [
      {
        test: /\.(glsl|vert|frag|vs|fs)$/,
        exclude: /node_modules/,
        use: ['raw-loader']
      }
    ]
  }
})

• 核对导入路径准确性，webpack对路径大小写敏感，请确保frontPage.js同级目录下的shaders/front-page/portal/vertex.glsl路径、文件名大小写完全匹配你的实际文件结构。
• 重启本地开发服务，或重新执行打包命令npm run dev/npm run build即可正常导入GLSL文件。

内容的提问来源于stack exchange，提问作者aitor